手把手带你使用webpack4构建一个Vue开发编译环境，并实现代码分割，css代码分离

Posted 前端技术专栏

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了手把手带你使用webpack4构建一个Vue开发编译环境，并实现代码分割，css代码分离相关的知识，希望对你有一定的参考价值。


关注 前端技术专栏 ，回复“ 资源 ”免费领取全套视频教程


前言


本篇文章不会细致讲webpack生产编译方面的优化操作，主要点是为了区分开发与生产环境的区别，代码分割分离的操作，所以不建议各位使用本篇文章内配置内容去进行生产编译，生产编译其它优化细节请各位自行另加配置，当然本篇文章配置也不是不能用作生产配置，只是给各位一个建议~



正文


所需环境

开始之前，请各位给自己电脑安装一下Nodejs，具体安装方法这里我就不做讲解了，各位可以移步Node官网查看文档然后对应系统版本进行安装，以下是我的Node or Npm版本

{ "engines": { "node": "10.16.0", "npm": "6.9.0" }}



目录结构

.├── dist├── node_modules├── public│ ├── index.html│ ├── images├── build│ ├── webpack.base.config.js│ ├── webpack.dev.config.js│ └── webpack.prod.config.js├── package.json├── package-lock.json├── .babelrc├── postcss.config.js└── src ├── assets │ ├── js │ ├── style │ ├── images ├── pages │ ├── app.vue │ ├── home │ │ ├── index.vue │ ├── router │ │ ├── index.js └── main.js

这里说一下几个重要目录，dist目录是webpack打包编译后输出目录，public目录是全局资源，build目录是webpack配置，src目录是我们开发的业务代码存放目录，请各位按以上结构创建好各目录。
首先，如果你的目录还没有package.json文件，请通过以下方式创建一个文件，请打开你电脑的命令行工具，进入到对应项目目录执行以下命令

npm init -y

执行完成后，你的项目目录内就会生成出一个package.json的配置文件



package.json中的相关依赖

{ "name": "webpack-demo", "version": "1.0.0", "description": "", "scripts": { "dev": "NODE_ENV=development webpack-dev-server --config ./build/webpack.dev.config.js --watch", "build": "NODE_ENV=production webpack --config ./build/webpack.prod.config.js", "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "", "license": "ISC", "engines": { "node": "10.16.0", "npm": "6.9.0" }, "devDependencies": { "@babel/core": "^7.5.5", "@babel/plugin-proposal-object-rest-spread": "^7.5.5", "@babel/plugin-syntax-dynamic-import": "^7.2.0", "@babel/plugin-transform-runtime": "^7.5.5", "@babel/preset-env": "^7.5.5", "@babel/runtime": "^7.5.5", "autoprefixer": "^9.6.1", "babel-loader": "^8.0.6", "clean-webpack-plugin": "^3.0.0", "core-js": "^3.1.4", "css-loader": "^3.1.0", "file-loader": "^4.1.0", "html-webpack-plugin": "^3.2.0", "image-webpack-loader": "^5.0.0", "mini-css-extract-plugin": "^0.8.0", "node-sass": "^4.12.0", "postcss-loader": "^3.0.0", "purify-css": "^1.2.5", "purifycss-webpack": "^0.7.0", "sass-loader": "^7.1.0", "style-loader": "^0.23.1", "url-loader": "^2.1.0", "vue-loader": "^15.7.1", "vue-style-loader": "^4.1.2", "vue-template-compiler": "^2.6.10", "webpack": "^4.38.0", "webpack-cli": "^3.3.6", "webpack-dev-server": "^3.7.2", "webpack-manifest-plugin": "^2.0.4", "webpack-merge": "^4.2.1" }, "dependencies": { "vue": "^2.6.10", "vue-router": "^3.0.7", "vuex": "^3.1.1" }, "postcss": { "plugins": { "autoprefixer": {} } }, "browserslist": [ "> 1%", "last 2 versions", "not ie >= 9", "ios >= 6", "android >= 4.0" ]}

可以看到以上配置有很多东西，这里我们主要只关注三个地方，scripts，dependencies，devDependencies。
首先在scripts中设置了dev和build，开发和生产两种模式，在dev的命令中我们指定了一个文件./build/webpack.dev.config.js，这个文件是开发配置文件；然后build中指定了./build/webpack.prod.config.js，这个是生产配置文件，这两个文件里面都是我们这个项目的开发和打包的配置内容，也是今天的主要内容，后面我会详细给大家讲解这两个文件里面的配置。
dependencies是我们生产依赖，devDependencies是开发依赖。
然后可以把这些依赖复制到你的package.json配置文件中，然后执行以下命令拉取这些所需依赖

npm install



webpack配置

根据上方目录结构可以很清晰的看到项目的webpack配置相关的内容是存放在build目录下的，所以下面我来给大家讲以下这三个文件的作用：

  • webpack.base.config.js 开发配置 or 生产配置的共用配置
  • webpack.dev.config.js 开发配置
  • webpack.prod.config.js 生产配置



webpack.base.config.js 配置

接下来，我们先看看共用配置，以下是具体配置信息

const path = require('path'),webpack = require('webpack'),VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = { entry: './src/main.js', resolve: { alias: { vue: 'vue/dist/vue.js', "@": path.resolve(__dirname, '../src') }, extensions: ['.ts', '.js', '.scss', '.css', '.png', '.jpg', '.jpeg', '.gif', '.vue', '.json'] }, module: { rules: [ { test: /\.vue$/, loader: 'vue-loader' }, { test: /\.js$/, loader: 'babel-loader', exclude: path.resolve(__dirname, '../node_modules'), include: path.resolve(__dirname, '../') }, { test: /\.(png|jpe?g|gif|bmp|svg)$/i, use: [ { loader: 'url-loader', options: { limit: 8192, // 小于8k将图片转换成base64 name: '[path][name].[ext]?[hash：8]' } }, { loader: 'image-webpack-loader', // 图片压缩 options: { bypassOnDebug: true } } ] }, { test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)$/i, use: [ { loader: 'file-loader', options: { name: '[path][name].[ext]?[hash：8]' //path/to/file.png?e43b20c0 } } ] }, { test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/i, loader: 'url-loader', options: { limit: 8192, name: 'fonts/[name].[hash:8].[ext]' } } ] }, plugins: [ new VueLoaderPlugin(),
 //编译进度 new webpack.ProgressPlugin(), ]}

根据以上配置信息，首先配置了项目编译的入口，指定了入口src目录下面的main.js文件，主要通过这个入口去编译我们业务代码的各个代码块

resolve: { alias: { vue: 'vue/dist/vue.js', "@": path.resolve(__dirname, '../src') }, extensions: ['.ts', '.js', '.scss', '.css', '.png', '.jpg', '.jpeg', '.gif', '.vue', '.json']  }
resolve配置主要配置alias or extensions，它们分别作用：
alias 配置了目录的别名，方便后面引用模块时可直接通过别名去查找文件。
extensions 配置是为了在后面业务开发中通过import或者require去引入模块时，不需要去填入文件的后缀。
module 主要配置代码的编译与文件的各种loader处理，根据配置我们可以看到，主要分别处理了.vue文件的编译，.js文件的编译，对图片，字体，音乐文件的处理。
plugins 配置插件，首先我们加入了针对处理vue的loader插件，然后再加了一个显示编译进度的插件。



webpack.dev.config.js配置

接下来，我在下方列出开发环境相关配置信息

const merge = require('webpack-merge'), webpack = require('webpack'),webpackBaseConfig = require('./webpack.base.config'),HtmlWebpackPlugin = require('html-webpack-plugin'),path = require('path')
module.exports = merge(webpackBaseConfig, { mode: 'development', devtool: 'inline-source-map', output: { filename: `[name].[hash:8].js`, chunkFilename: `[name].[hash:8].js`, path: path.resolve(__dirname, '../dist') }, module: { rules: [ { test: /\.(sa|sc|c)ss$/, use: [ 'vue-style-loader', { loader: 'css-loader', options: { sourceMap: true } }, { loader: 'postcss-loader', options: { sourceMap: true, } }, { loader: 'sass-loader', options: { sourceMap: true, // you can also read from a file, e.g. `variables.scss` data: `$color: red;` } } ] } ] }, plugins: [ //热更新 new webpack.HotModuleReplacementPlugin(),
 new HtmlWebpackPlugin({ title: 'webpack-demo', filename: path.resolve(__dirname, '../dist/index.html'), template: path.resolve(__dirname, '../public/index.html'), favicon: '' }),
 //持久化缓存 new webpack.NamedModulesPlugin() ], devServer: { contentBase: path.resolve(__dirname, '../dist'), open: true, host: 'localhost', port: 8080, hot: true, compress: true,//服务器压缩 proxy: {}, progress: true }})

以上配置通过webpack-merge把webpack.base.config.js的配置合并进来了，然后补充了一些开发环境相关配置。
mode配置设置了当前打包的方式，为开发模式。
devtool配置主要作用是为了业务开发中，如果发生了逻辑错误，此配置会告诉开发者报错代码的具体位置，当然它的取值也有多个，所以具体请移步webpack的官方文档进行查看。
output输出编译后文件相关配置，里面的chunkFilename的作用稍后讲解生产配置时再做说明。
module配置中主要针对开发环境对css与scss编译处理，主要使用了vue-style-loader，css-loader，postcss-loader，sass-loader。
plugins主要配置热更新，html的处理以及缓存处理。
devServer是webpack-dev-server的相关配置，主要是启动一个开发服务，方便开发时能够实时看到编写内容



webpack.prod.config.js配置

const merge = require('webpack-merge'),webpackBaseConfig = require('./webpack.base.config'),HtmlWebpackPlugin = require('html-webpack-plugin'),path = require('path'),glob = require('glob'),webpack = require('webpack'),{ CleanWebpackPlugin } = require('clean-webpack-plugin'),ManifestPlugin = require('webpack-manifest-plugin'),MiniCssExtractPlugin = require('mini-css-extract-plugin'),PurifyCSSPlugin = require('purifycss-webpack')// UglifyJsPlugin = require('uglifyjs-webpack-plugin'),// OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin'),
module.exports = merge(webpackBaseConfig, { mode: 'production', devtool: 'none', output: { filename: `[name].[chunkhash:8].js`, chunkFilename: `[name].[chunkhash:8].js`, path: path.resolve(__dirname, '../dist'), publicPath: "/" }, optimization: { // minimizer: [ // new UglifyJsPlugin({ // cache: true, // parallel: true, // sourcMap: true // }), // new OptimizeCSSAssetsPlugin({}), // ], splitChunks: { chunks: "all", cacheGroups: { vendors: { test: /[\\/]node_modules[\\/]/, // 匹配node_modules目录下的文件 priority: -10 // 优先级配置项 }, default: { minChunks: 2, priority: -20, // 优先级配置项 reuseExistingChunk: true } } } }, module: { rules: [ { test: /\.(sa|sc|c)ss$/, use: [ MiniCssExtractPlugin.loader, { loader: 'css-loader', options: {} }, { loader: 'postcss-loader', options: {} }, { loader: 'sass-loader', options: { indentedSyntax: true, // you can also read from a file, e.g. `variables.scss` data: `$color: red;` } }, ] }, ] }, plugins: [ //持久化缓存 new webpack.HashedModuleIdsPlugin(),
 //清目录 new CleanWebpackPlugin(), new HtmlWebpackPlugin({ title: 'webpack-demo', filename: path.resolve(__dirname, '../dist/index.html'), template: path.resolve(__dirname, '../public/index.html'), minify: { removeRedundantAttributes: true, // 删除多余的属性 collapseWhitespace: true, // 折叠空白区域 removeAttributeQuotes: true, // 移除属性的引号 removeComments: true, // 移除注释 collapseBooleanAttributes: true // 省略只有 boolean 值的属性值 例如：readonly checked }, favicon: '' }),
 //提取css new MiniCssExtractPlugin({ filename: 'assets/style/[name].[chunkhash:8].css', chunkFileName: 'assets/style/[name].[chunkhash:8].css', allChunks: true }),
 //删除多余的CSS new PurifyCSSPlugin({ paths: glob.sync(path.join(__dirname, '../public/*.html')) }),
 //生成manifest清单 new ManifestPlugin() ]})
生产配置我就不一一讲解了，这里我就只说重要部分，当然重要的部分就是对于一些压缩和优化上的操作，并且生产环境是不需要服务的，它与开发环境最大的区别就是生产环境会分割代码，分离css，压缩代码，做一些优化上的处理，而开发环境是不会特意做这些操作的。
首先，它和开发配置一样，把webpack.base.config.js合并进来了，然后扩展了新的配置，设置了mode为生产环境，devtool给关闭了，你也可以开启devtool但是这会影响打包速度，下面主要说一下几个配置：
optimization配置是webpack4才加的，它的作用是用来分割公共代码的，当webpack的mode设为生产模式时，optimization的配置会默认开启。
optimization的参数说明

  • chunks：表示从哪些chunks里面抽取代码，除了三个可选字符串值 initial、async、all 之外，还可以通过函数来过滤所需的 chunks；

  • minSize：表示抽取出来的文件在压缩前的最小大小，默认为 30000；

  • maxSize：表示抽取出来的文件在压缩前的最大大小，默认为 0，表示不限制最大大小；

  • minChunks：表示被引用次数，默认为1；上述配置commons中minChunks为2，表示将被多次引用的代码抽离成commons。


值得注意的是，如果没有修改minSize属性的话，而且公用的代码size小于30KB的话，它就不会分割成一个单独的文件。在真实情形下，这是合理的，因为（如分割）并不能带来性能的提升，反而使得浏览器多了一次对资源的请求。

  • maxAsyncRequests：最大的按需(异步)加载次数，默认为 5；

  • maxInitialRequests：最大的初始化加载次数，默认为 3；

  • automaticNameDelimiter：抽取出来的文件的自动生成名字的分割符，默认为 ~；

  • name：抽取出来文件的名字，默认为 true，表示自动生成文件名；

  • cacheGroups: 缓存组。（这才是配置的关键）


缓存组会继承splitChunks的配置，但是 test、priorty和reuseExistingChunk只能用于配置缓存组 。cacheGroups是一个对象，按上述介绍的键值对方式来配置即可，值代表对应的选项。除此之外，所有上面列出的选择都是可以用在缓存组里的：chunks, minSize, minChunks, maxAsyncRequests, maxInitialRequests, name。可以通过optimization.splitChunks.cacheGroups.default: false禁用default缓存组。默认缓存组的优先级(priotity)是负数，因此所有自定义缓存组都可以有比它更高优先级（译注：更高优先级的缓存组可以优先打包所选择的模块）（默认自定义缓存组优先级为0）


chunkFilename

个人理解chunkFilename就是未被列在entry中，但有些场景需要被打包出来的文件命名配置。比如按需加载（异步）模块的时候，这样的文件是没有被列在entry中的使用CommonJS的方式异步加载模块。比如：

require.ensure(["modules/index.js"], function(require) { var a = require("modules/index.js"); // ...}, 'app');

异步加载的模块是要以文件形式加载，所以这时生成的文件名是以chunkname配置的，生成出的文件名就是app.min.js。
require.ensure 第三个参数是给这个模块命名，否则 chunkFilename: "[name].min.js"中的 [name]是一个自动分配的、可读性很差的id。
当然，异步加载模块的写法还有一种方式，就是通过es6的import。比如：

import( /* webpackChunkName: 'pages/home/index' */ '@/pages/home')

以上代码执行后就会输出一个pages目录然后home目录里面有一个index.acw9gpl0m.js文件，当然chunkhash我是随便输入的，这个以打包的chunkhash为准。
如果使用这种方式需要添加一个.babelrc文件，具体配置

{ "presets": [ "@babel/preset-env" ], "plugins": [ "@babel/plugin-proposal-object-rest-spread", "@babel/plugin-transform-runtime", "@babel/plugin-syntax-dynamic-import" ]}


MiniCssExtractPlugin

miniCssExtractPlugin将CSS提取为独立的文件的插件，对每个包含css的js文件都会创建一个CSS文件，支持按需加载css和sourceMap
只能用在webpack4中，对比另一个插件 extract-text-webpack-plugin优点:

  • 异步加载
  • 不重复编译，性能更好
  • 更容易使用
  • 只针对CSS

这里目前配置是没有配置压缩的，如果需要生产压缩，可以使用optimize-css-assets-webpack-plugin 插件。设置 optimization.minimizer 覆盖webpack默认提供的，确保也指定一个JS压缩器，具体配置可见optimization配置的注释部分代码，需自行拉取所需依赖并引入。
关于MiniCssExtractPlugin插件的具体参数，我这里就不做介绍了，可去npm上自行了解。


补充

关于postcss-loader，是为了给一些css3代码加浏览器兼容前缀，所以在目录中创建了一个postcss.config.js配置文件，具体配置内容如下：

module.exports = { plugins: [ require('autoprefixer') ]}


Vue相关代码

main.js

import "core-js/modules/es.promise";import "core-js/modules/es.array.iterator";import Vue from 'vue'import router from '@/router/index'import App from '@/pages/app'
Vue.config.productionTip = false
new Vue({ router, render: h => h(App),}).$mount('#app')
//热更新，如果更改业务代码，无刷新自动局部更新视图if (module.hot) { module.hot.accept()}


router/index.js

import Vue from 'vue'import VueRouter from 'vue-router';Vue.use(VueRouter)
const router = new VueRouter({ routes: [ { path: '/', component: () => import( /* webpackChunkName: 'pages/home/index' */ '@/pages/home') } ]})
export default router


pages/app.vue


<style lang="scss">.index { color: red;}</style>

<template><section class="index"> <router-view></router-view></section></template>
<script>export default { name: 'index', data () { return {
 } }}</script>


pages/home/index.vue

<style lang="scss">.home { color: blue;}</style>
<template><section class="home">{{content}}</section></template>
<script>export default { name: 'home', data () { return { content: 'home页面内容' } }}</script>



结语


以上是本文全部内容，如有错误请留言指正，共同讨论，一起进步。
如需尝试运行，请自行去仓库拉取代码，地址：
https://github.com/wujiabk/vue-dev-environment



猜你爱看







微  博：前端吴佳





关注「前端技术专栏」加星标

每天给您推送最新原创技术文章



好看，帮点击在看❤️


以上是关于手把手带你使用webpack4构建一个Vue开发编译环境，并实现代码分割，css代码分离的主要内容，如果未能解决你的问题，请参考以下文章

从基础到实战 手把手带你掌握新版Webpack4.0

手把手带你掌握新版Webpack4.0

从基础到实战 手把手带你掌握新版Webpack4.0

手把手教你升级到Webpack4

手把手带你分解 Vue 倒计时组件

手把手使用 Webpack 4 建立 VUE 项目