WebPack工作原理
WebPack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Sass,TypeScript等),并将其转换和打包为合适的格式供浏览器使用。在3.0出现后,Webpack还肩负起了优化项目的责任。
这段话有三个重点:
打包:可以把多个Javascript文件打包成一个文件,减少服务器压力和下载带宽。
转换:把拓展语言转换成为普通的JavaScript,让浏览器顺利运行。
优化:前端变的越来越复杂后,性能也会遇到问题,而WebPack也开始肩负起了优化和提升性能的责任
1、webpack的基本配置
1.1、entry(项目入口,打包的入口文件,一个字符串或者一个对象):entry:"./src/index.js"
1.2、output(出口文件,配置打包的结果,一个对象):
output:{ filename: "build.js" }
1.3、module(模块的处理):loader的配置主要在module.rules中进行,例如:
module: { rules:[{ test: /(\.jsx|\.js)/, //表示匹配规则,是一个正则表达式 use:{ //表示针对匹配文件将使用处理的loader loader: "babel-loader", options: { presets: ["es2015", "react"] } } }] }
1.4、plugin(loader不能做的处理都能交给plugin来做),例如:
const CleanWebpackPlugin = require("clean-webpack-plugin") { plugin:[ new webpack.DefinePlugin({ "process.env" : { NODE_ENV: JSON.stringify("production") } }), new CleanWebpackPlugin(["js"], { root: __dirname + "/stu/", verbose: true, dry: false }) ] }
1.5、其它常用属性:
devtool:打包后的代码和原始代码存在较大的差异,此选项控制是否生成以及如何生成sourcemap
devserver:通过配置devserver选项,可以开启一个本地服务器(通常在这里配置跨域)
devServer: { proxy: { '/api': { target: 'http://www.baidu.com/', pathRewrite: {'^/api' : ''}, changeOrigin: true, // target是域名的话,需要这个参数, secure: false, // 设置支持https协议的代理 } } }
watch:启用watch模式后,webpack将持续监听热河已经解析文件的更改,开发是开启会很方便
watchoption:用来定制watch模式的选项
performance:打包后命令行如何展示性能提示,如果超过某个大小是警告还是报错
1.6、webpack打包优化常用配置:
1.6.1、减小打包体积:
使用CommonsChunkPlugin分离第三方包
entry: { vendor: ['babel-polyfill', "axios", "marked", "react", "react-dom", "react-router-dom"], // 第三方文件 app: './src/main.js' }, plugins: [ new webpack.optimize.CommonsChunkPlugin({ name: "vendor", // 当加载 vendor 中的资源的时候,把这些资源都合并到 vendor.js 文件中 filename: "js/vendor.js", minChunks: Infinity, }) ],
或者使用externals进行cdn网络托管:
// index.html页面中引入 <script src="https://cdn.bootcss.com/react/15.0.0/react-with-addons.min.js"></script> <script src="https://cdn.bootcss.com/react/15.0.0/react-dom.min.js"></script> <script src="https://cdn.bootcss.com/react-router/3.0.0/ReactRouter.min.js"></script> <script src="https://cdn.bootcss.com/redux/3.6.0/redux.min.js"></script> <script src="https://cdn.bootcss.com/react-redux/5.0.1/react-redux.min.js"></script> <script src="https://cdn.bootcss.com/history/4.5.0/history.min.js"></script> // webpack中配置 externals: { 'react': 'React', 'react-dom': 'ReactDOM', 'react-router': 'ReactRouter', 'redux': 'Redux', 'history': 'History' }, // vue.config.js configureWebpack:{ externals: { 'vue': 'Vue', 'element-ui': 'ELEMENT', 'vue-router': 'VueRouter' }, }
1.6.2、小图片优化,使用url-loader,将小图转成base64,防止小图太多请求次数太多
npm install -D url-loader
module: { rules: [{ test: /\.(png|svg|jpg|gif)$/, use: [{ loader: 'url-loader', // 优化小图片过多造成请求数太多 options: { limit: 8192, // 如果图片小于 8192 bytes 就直接 base64 内置到模板,否则才拷贝 outputPath: 'img/' } }] },
1.6.3、压缩css、js和html:
// 压缩css rules: [ { test: /\.css$/, use: ExtractTextPlugin.extract({ fallback: "style-loader", //这个地方配置一个对象,添加一个属性进行压缩css文件 use: { loader: 'css-loader', options: { minimize: true // 配置minimize 值为true,压缩css 文件 } } }) }, // 压缩js /*下载*/ npm install -D uglifyjs-webpack-plugin /*引入*/ const UglifyJsPlugin = require('uglifyjs-webpack-plugin') /*配置*/ plugins: [ new UglifyJsPlugin(), // 压缩 JavaScript ], //压缩html /*下载*/ npm install -D html-webpack-plugin /*引入*/ const HtmlWebpackPlugin = require('html-webpack-plugin') /*配置*/ plugins: [ new HtmlWebpackPlugin({ template: './index.html', // 把 index.html 也打包到 dist 目录中 // 压缩 html,默认 false 不压缩 minify: { collapseWhitespace: true, // 去除回车换行符以及多余空格 removeComments: true, // 删除注释 } }), ],