石家庄网站建设外包公司哪家好,wordpress最简单的主题,php门户网站模板下载,技术博客主题wordpress这是优妈成长记的第63篇原创这是一个webpack配置说明本文是发布在github上webpack-demo的README文件内容。主要对webpack.config.js每一条的注释说明。github项目地址#xff1a;https://github.com/hourong88/webpack-demo可以点击文章最下方【阅读原文】跳转github链接查看https://github.com/hourong88/webpack-demo可以点击文章最下方【阅读原文】跳转github链接查看或下载实战代码直接食用。Run the example$ npm install$ npm startIntroduce这个demo是简单的webpack配置demo您可以根据实际项目需求按照下方的配置说明个性化的配置您的项目。您也可以关注我后续会发布最新的依赖的脚手架项目。This demo is a simple webpack configuration demo, you can personalise your project according to your actual project requirements by following the configuration instructions below.You can also follow me and I will be posting the latest scaffolding projects with dependencies.webpack.config.js 配置说明 Configuration instructionsThe following comments are in Chinese, you can use the software to translate them.const path require(path)// module.exports function (webpackEnv) { module.exports { //定义生产环境和开发环境 //开发环境development 和生产环境 production构建目标差异很大 //开发环境需要强大的具有实时重新加载或热模块替换能力source map 和 localhost server 调试能力 //生产环境: 我们关注更小的bundle更轻量的source map更优化的资源改善加载时间。 //所以不同环境配置不同有倾向性。 // const isEnvDevelopment webpackEnv development; // const isEnvProduction webpackEnv production; // const publicPath isEnvProduction ? /ui/ : isEnvDevelopment /; // return{ //entry表示入口webpack构建第一步将从entry开始输入类型可以抽象为字符串数组和对象。从入口开始递归搜寻及解析出所有入口依赖的模块。entry是必填的否则会报错、退出 entry: ./src/app.js, //可以有一个入口也可以有多个入口多个入口对应多个**chunk**具体写法看中文文档。entry根据构建出来的依赖关系图从而知道哪些部分将会输出为bundle。 //什么是chunk //webpack专用术语用于管理webpack打包进程。chunk和输出的**bundle**一一对应但是有些是一对多的关系。 //如果entry配置的是对象object可能就会出现多个thunk这时候thunk名称是对象健值对中健的名称 //什么是bundle //bundle是已经加载完毕和被编译后的源代码最终版本。由多个模块产生一个应用可以拆分为多个bundle。Bundle Splitting是webpack优化代码的一种方法。 //总之chunk和bundle都可以拆分按需加载减少代码量。 output: { path: path.resolve(__dirname , dist), //输出文件存放的路径 //filename: isEnvDevelopment ? bundle.js : [name].js,//输出文件完整名称即使指定了多个入口点(entry points)output配置项也只能设置一个。 filename:bundle.js, publicPath: publicPath,//发布到线上所有资源的URL前缀 pathInfo:true,//是否包含有用的文件路径信息到生成到代码里为布尔类型。 chunkFilename:[name].js,//chunk文件名称 sourceMapFilename:[file].map,//生成到source map文件名称 devtoolModuleFilenameTemplate: webpack:lll[resource-path ], //浏览器开发者工具显示的源码模块名称 }, //配置模块 module: { rules:[ { //babel es6转es5 兼容 babel-loader 同步的 //配置模块的读取和解析规则通常用来配置Loader。对模块源码进行转换 test: /\.(js|mjs|jsx|ts|tsx)$/,//正则匹配命中要使用loader的文件,通过test、 inc1ude、 exclude三个配置项来选中Loader要应用规则的文件。 include:[ path.resolve(__dirname , src) //只会命中这里面的文件 ], exclude: /node_modules/, //忽略这里面的文件 use: [//使用哪些loader有先后次序从后向前执行 style-loader, //直接使用loader名称 scss 文件的处理顺序为先 sass-loader再 css-loader再 style-loader { options: { //向html-loader传一些参数 }, loader: require.resolve(eslint-loader), //常用loader 分别配置 //转换编译script-loader, babel-loader,ts-loader,coffee-loader //处理样式style-loader,css-loader,less-loader,sass-loader,postcss-loader(postcss和scss关系类似babel和js) //处理文件raw--loader,url-loader,file-loader //处理数据csv-loader,xml-loader //处理模板语言html-loader,pug-loader,jade-loader,markdown-loader //清理和测试mocha-loader,eslint-loader //reactbabel-preset-react }, ], }, ], noParse:[ //提高webpack构建性能忽略没采用模块化的文件递归处理 //noParse文件不能包含模块化的语句importrequiredefind不然会导致构建文件无法在浏览器浏览 /lspecial-library\.js$1 //用正则匹配 ] }, plugins:[ //配置插件,扩展webpack功能plugin配置项接收一个数组数组每一项都是使用一个plugin实例plugin的参数通过构造函数传入。使用plungin需要在社区找到plugin本身提供的配置项 ], resolve: { //配置寻找模块的规则 modules: [ //寻找模块的根目录为 array 类型默认以 node_modules 为根目录 node_modules, path.resolve( dirname, app), ], extensions: [.js, .json, .jsx, .css], //模块的后缀名 alias :{ //除了可以用对象也可以用数组进行详细配置 //将module’映射成new-module, module/path/file映射成new-module/path/file’ //通过别名映射原来的路径为新路径 module:new-module, }, symlinks: true , // 是否跟随文件的软链接去搜寻模块的路径 descriptionFiles: [package.json],//模块的描述文件 mainFields : [main], //模块的描述文件里描述入口的文件的字段名 enforceExtension: false, //是否强制导入语句写明文件后缀,如果为true导入模块必须带后缀 }, performance: { //输出文件性能检查配置 hints: false, // 关闭性能检查 maxAssetSize: 200000 , // 最大文件的大小(单位为 bytes) }, devtool: source-map, //用于开发环境调试生产环境可以不配置 devServer: { contentBase: ./public, //本地服务器所加载的页面所在的目录 historyApiFallback: true, //不跳转 inline: true, //实时刷新 hot: true }, target: web, //浏览器默认 profile: true, // 是否捕捉 Webpack构建的性能信息用于分析是什么原因导致构建性能不佳 cache : false , // 是否启用缓存来提升构建速度 }// }//优化//1.缩小文件搜索范围//* loader 调整目录结构include缩小命中范围//* resolve 定义搜索绝对路径//* alias 映射新路径//* extensions: [’js’],尽可能减少后缀尝试搜索的可能性//* noParse 忽略没用模块化的文件//2.用dllPlugin// 动态链接库 antd react charts//3.HappyPack 分解任务多线程解析和处理文件 loader最耗时 happypack/loader//4.自动刷新 watch监听 不监听node_modules//5.区分环境 开发和生产//6.压缩代码 uglifyJs 压缩jscssnano 压缩css//7.cdn加速//8.tree shaking 可以用来剔除js中用不上的死代码//9.提取公共代码组件 公共代码base.js 所有页面都依赖的基础组件库entry配置打包成单独的trunk//10.分割代码按需加载 import() 返回一个promiseoutput配置分割出去的thunk名称在路由或者点击按钮事件里面配置//11.使用prepack改变源码运行逻辑 plugin 运行时优化//12.scope hoisting 作用于提升打包出来的代码更小运行更快 是一个plugin//13.输出分析 webpack analyse//[over]
