1.为什么需要webpack
- css预处理器如less、sass等浏览器不支持
- 部分低版本浏览器不支持es6语法，需要转换为es5语法，为浏览器使用
- 项目依赖过多，文件过多，需要将复杂的代码结构转换为细化
- 模块化开发，保留单个模块的可维护性，又减少了http请求数，优化加载速度
2.什么是webpack
webpack是前端打包工具，通过分析所在项目的目录结构，找到模块及各模块间的依赖关系，且将浏览器不能直接运行的语言如typescript、css预处理器语法（less、sass）等或者因为浏览器因为版本底不支持新的内置函数，需要将其转换及打包成浏览器支持格式
- 模块合并打包
- 代码转换
- 文件优化
接下来介绍下vue不同版本脚手架webpack使用配置的区别
3.webpack的使用
3.1 vue脚手架中的webpack目录结构
左图项目结构为vue-cli 2x版本脚手架生成的项目,build文件夹包含了webpack配置
右图项目结构为vue-cli 3x版本脚手架生成的项目,3x版本并不存在该文件，而是将其配置集成到vue.config.js中
3.2 webpack配置（vue-cli 2x）
3.2.1 配置文件
webpack配置文件有三个
- webpack.dev.conf.js （ 开发环境运行的webpack配置文件 ）
- webpack.prod.conf.js （ 生产环境运行的webpack配置文件 ）
- webpack.base.conf.js （ webpack的基础配置文件，前两者都需要依赖它 ）
针对不同环境的配置，运行不同的配置文件
（1）webpack.base.conf.js 结构
'use strict' const path = require('path') const utils = require('./utils') const config = require('../config') const vueLoaderConfig = require('./vue-loader.conf') function resolve (dir) { return path.join(__dirname, '..', dir) } module.exports = { entry: { app: './src/main.js' }, output: { path: config.build.assetsRoot, filename: '[name].js', }, module: { rules: [ { test: /\.vue$/, loader: 'vue-loader', options: vueLoaderConfig }, { test: /\.js$/, loader: 'babel-loader', resolve('node_modules/webpack-dev-server/client')] }, { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader', { loader: 'postcss-loader', options: { plugins: () => [ require('autoprefixer')({ overrideBrowserslist: ['last 2 versions', '>1%'] }) ] } }] }, { test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, loader: 'url-loader', options: { limit: 10000, name: utils.assetsPath('img/[name].[hash:7].[ext]') } }, ] }, plugins: [ new HtmlWebpackPlugin({ title: '首页', template: 'index.html', filename: 'index.html' }), new CleanWebpackPlugin(), ] }
涉及到的配置知识
- entry - 让 webpack 知道使用哪个模块，来作为构建其内部依赖图的开始
- output - 让 webpack 知道在哪里输出它所创建的 bundles，以及如何命名这些文件，默认值为 ./dist
- loader - 处理浏览器不能直接运行的语言,可以将所有类型的文件转换为 webpack 能够处理的有效模块 ( 如上图 vue-loader用于解析和转换 .vue 文件,babel-loader 用于转换浏览器因不兼容es6写法的转换 常见loader还有TypeScript、Sass、Less、Stylus
babel-loader：解析 .js 和 .jsx 文件 tsx-loader：处理 ts 文件 less-loader：处理 less 文件，并将其编译为 css sass-loader：处理 sass、scss 文件，并将其编译为 css postcss-loader：// 解析CSS文件并且添加浏览器前缀到 CSS 内容里 module.exports = { plugins: [require('autoprefixer')], }; css-loader：处理 css 文件 style-loader：将 css 注入到 DOM file-loader：将文件上的import / require 解析为 url，并将该文件输出到输出目录中 url-loader：用于将文件转换成 base64 uri 的 webpack 加载程序 html-loader：将 HTML 导出为字符串， 当编译器要求时，将 HTML 最小化
- plugins - 通过插件引入来处理，用于转换某种类型的模块，可以处理：打包、压缩、重新定义变量等
(2) webpack.dev.conf.js 结构
开发环境的webpack配置文件，依赖了base.conf，需要将其合并后再执行
'use strict' // webpack.dev.js const webpack = require('webpack') const merge = require('webpack-merge') const baseWebpackConfig = require('./webpack.base.conf') const devWebpackConfig = merge(baseWebpackConfig, { devServer: { hot: true, contentBase: false, // since we use CopyWebpackPlugin. compress: true, host: '0.0.0.0', port: 8080, open: true, }, })
开发环境时，如上所示，需要配置devServer属性，通过webpack-dev-server 的这些选项改变，来改变其行为，常用配置有：
- hot - 是否启用 webpack的模块热替换功能
- host - 指定使用一个 host可以让外部访问。默认是 localhost
- port - 指定要监听请求的端口号
- compress - 是否启动gzip压缩
- open - 告诉 dev-server 在 server 启动后是否打开浏览器
更多配置前往 🚀 官网dev-server配置
(3) webpack.prod.conf.js 结构
// webpack.prod.conf.js 'use strict' const path = require('path') const utils = require('./utils') const webpack = require('webpack') const config = require('../config') const merge = require('webpack-merge') const baseWebpackConfig = require('./webpack.base.conf') const CopyWebpackPlugin = require('copy-webpack-plugin') const HtmlWebpackPlugin = require('html-webpack-plugin') const ExtractTextPlugin = require('extract-text-webpack-plugin') const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin') const UglifyJsPlugin = require('uglifyjs-webpack-plugin') const env = require('../config/prod.env'); const Version = new Date().getTime(); const webpackConfig = merge(baseWebpackConfig, { output: { path: config.build.assetsRoot, filename: utils.assetsPath('js/[name].[chunkhash]'+ Version+'.js'), chunkFilename: utils.assetsPath('js/[id].[chunkhash]'+ Version+'.js') }, plugins: [ new UglifyJsPlugin(), new ExtractTextPlugin({ filename: utils.assetsPath('css/[name].[contenthash]'+Version+'.css'), allChunks: true, }), new webpack.optimize.CommonsChunkPlugin({ name: 'app', async: 'vendor-async', children: true, minChunks: 3 }), new CopyWebpackPlugin([ { from: path.resolve(__dirname, '../static'), to: config.build.assetsSubDirectory, ignore: ['.*'] } ]) ] }) module.exports = webpackConfig
常用plugins插件的功能分解：
- process.env
webpack编译过程中设置全局变量process.env
new webpack.DefinePlugin({ 'process.env': require('../config/dev.env.js') }
或者通过命令行配置(用到cross-env)
cross-env NODE_ENV=production webpack --config webpack.config.prod.js
- UglifyJsPlugin - 专门用来压缩js文件的
- ExtractTextPlugin - 压缩提取出来的CSS
- HtmlWebpackPlugin
new HtmlWebpackPlugin({ title: '首页', template: 'index.html', filename: 'index.html' }),
生成 html 文件，并将包添加到 html 中
- copy-webpack-plugin - 拷贝文件
3.2.2 命令行工具
运行webpack命令行工具,前一章讲了webpack配置的用法，下面是CLI 用法，两者可替代
webpack-dev-server //启动开发服务器 --open //打开浏览器 --config webpack.dev.js //设置运行此脚本时执行的配置文件为webpack.dev.js --progress //显示进度条
- 开发环境： 运行 npm run dev，执行webpack.dev.conf.js 配置文件，通过webpack-dev-server来启动一个服务到端口（默认8080）访问localhost:8080，来为你的静态资源及bundle（自动编译）服务。通过访问http://localhost:8080/webpack-dev-server/bundle，bundle每次重编译后浏览器页面都会自动更新。
- 生产环境： 运行 npm run build, 将执行编译打包各个模块，生成bundle.js(打包模块生成)等静态资源到目录（默认dist），再将js插入到html页面，以便访问浏览器时加载资源文件，触发立即执行函数
3.3 webpack配置（vue-cli 3x）
vue-cli3 创建的时候并不会自动创建vue.config.js，因为这个是个可选项，需要修改webpack的时候才会自己创建一个vue.config.js，把webpack的配置加入到vue.config.js
// vue.config.js const path = require('path'); function resolve(dir) { return path.join(__dirname, '.', dir); } const productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i; const CompressionWebpackPlugin = require('compression-webpack-plugin'); const UglifyJsPlugin = require('uglifyjs-webpack-plugin'); module.exports = { outputDir: 'dist', runtimeCompiler: false, productionSourceMap: false, chainWebpack: (config) => { config.output.filename('[name].[hash].js').end(); config.resolve.alias.set('@', path.resolve('src'));// 添加别名 config.entry('main').add('babel-polyfill'); }, configureWebpack: () => { if (process.env.NODE_ENV === 'production') { return { plugins: [ new CompressionWebpackPlugin({ filename: '[path].gz[query]', test: productionGzipExtensions, threshold: 2048, minRatio: 0.8, }), new UglifyJsPlugin({ uglifyOptions: { compress: { drop_debugger: true, drop_console: true, }, sourceMap: false, parallel: true, }, }), ], }; } return false; }, css: { extract: true, sourceMap: false, modules: false, }, devServer: { port: 8088, host: '0.0.0.0', hotOnly: false, }, pluginOptions: { // ... } };
- outputDir - 生产环境构建文件的目录，相当于webpack中的output
- devServer - 就是相当于配置webpack-dev-server中的行为
- css - extract配置(是否使用css分离插件 ExtractTextPlugin）
- pluginOptions - 第三方插件配置
- configureWebpack - webpack 配置
通过process.env.NODE_ENV 去区分环境不同执行不同的命令
