【webpack】从vue-cli 2x 到 3x 迁移与实践

【webpack】从vue-cli 2x 到 3x 迁移与实践

1.为什么需要webpack

css预处理器如less、sass等浏览器不支持部分低版本浏览器不支持es6语法，需要转换为es5语法，为浏览器使用项目依赖过多，文件过多，需要将复杂的代码结构转换为细化模块化开发，保留单个模块的可维护性，又减少了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，以及如何命名这些文件，默认值为 ./distloader - 处理浏览器不能直接运行的语言,可以将所有类型的文件转换为 webpack 能够处理的有效模块 ( 如上图 vue-loader用于解析和转换 .vue 文件,babel-loader 用于转换浏览器因不兼容es6写法的转换 常见loader还有TypeScript、Sass、Less、Stylus

babel-loader：解析 .js 和 .jsx 文件tsx-loader：处理 ts 文件less-loader：处理 less 文件，并将其编译为 csssass-loader：处理 sass、scss 文件，并将其编译为 csspostcss-loader：// 解析CSS文件并且添加浏览器前缀到 CSS 内容里module.exports = { plugins: [require('autoprefixer')],};css-loader：处理 css 文件style-loader：将 css 注入到 DOMfile-loader：将文件上的import / require 解析为 url，并将该文件输出到输出目录中url-loader：用于将文件转换成 base64 uri 的 webpack 加载程序html-loader：将 HTML 导出为字符串， 当编译器要求时，将 HTML 最小化

plugins - 通过插件引入来处理，用于转换某种类型的模块，可以处理：打包、压缩、重新定义变量等

​​webpack官方文档链接 ????​​

(2) webpack.dev.conf.js 结构

开发环境的webpack配置文件，依赖了base.conf，需要将其合并后再执行

'use strict'// webpack.dev.jsconst 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可以让外部访问。默认是 localhostport - 指定要监听请求的端口号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 - 压缩提取出来的CSSHtmlWebpackPlugin

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（自动编译）服务。通过访问运行 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.jsconst 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中的outputdevServer - 就是相当于配置webpack-dev-server中的行为css - extract配置(是否使用css分离插件 ExtractTextPlugin）pluginOptions - 第三方插件配置configureWebpack - webpack 配置

通过process.env.NODE_ENV 去区分环境不同执行不同的命令

附上​​Vue-cli 3x 官方配置文档​​????

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。