从WebPack 4.X 到 Vue-Cli 3.X 一篇就够

一、WebPack

webpack的两大特点：1模块化 2打包

作用：

1将sass/less 等预编译的css语言转换成浏览器识别的css文件

2能够将多个预编译文件打包成一个文件

3 打包image/styles/assets/scrips/等前端常用的文件

4 搭建开发环境开启服务器

5 监视文件改动，热部署。

6 将单文件组件(*.vue)类型的文件，转化成浏览器识别的内容

1. 安装webpack：

 $ npm i -D webpack webpack-cli //-D 安装在开发环境复制代码

WebPack 4.X 支持零配置 （我们先来尝试一下webpack如何实现打包部署）

$ npx webpack //基于npx执行了webpack命令，而这个命令就是实现打包部署的
 查找顺序：
 - 找到node_modules/.bin - 要求我们得有 webpack.cmd 的文件 - 执行 webpack.cmd 复制代码

知识点：自npm5.2.0开始以后，自动安装了npx（ npx 会帮你执行依赖包里的二进制文件）

举个例子：（在npx没有出现之前）

npm i webpack -D //非全局安装//如果要执行 webpack 的命令./node_modules/.bin/webpack -v复制代码

有了npx后

npm i webpack -D //非全局安装npx webpack -v 复制代码

npx 会自动查找当前依赖包中的可执行文件，如果找不到，就会去 PATH 里找。如果依然找不到，就会帮你安装。

2. webpack 自定义配置

虽然webpack支持零配置，但是日常开发中我们也会根据需求来自己定义基础配置

在根目录下创建webpack.config.js文件：

/* * 在这个文件中设置我们自定义的打包规则 * 1.所有的规则都写在module.exports={}中 */
//因为需要用node中的path内置模块（内置模块，无需下载）
let path = require('path');
module.exports = {
 //=>打包模式 开发环境development 生产环境production
 mode: 'production',
 //=>入口
 entry: './src/index.js',
 //=>输出
 output: {
 //=>输出文件的文件名
 filename: 'bundle.min.[hash].js',
 //=>输出目录的"绝对路径"
 path: path.resolve(__dirname, 'dist')
 }
}复制代码

3. 自定义配置文件名

我们可以在根目录下package.json文件中

//package.json
"scripts": {
 "serve": "webpack-dev-server --config webpack.config.development.js", "build": "webpack --config webpack.config.development.js"}
//这样我们以后就可以通过 yarn或者npm直接执行 serve/build 了，方便了很多复制代码

4. webpack-dev-server:

是一个用来快速搭建本地运行环境的工具。命令简单webpack-dev-server或配置命令脚本快捷运行(在3中 已经配置了serve，我们以后可以直接运行 serve)

安装

$ yarn add webpack-dev-server -D复制代码
//=>关于webpack-dev-server的一些配置 执行命令：webpack-dev-server --config xxx.js（特点：服务器启动后，默认是不关闭的，当我们修改SRC中的文件时，它会自动进行编译，然后自动刷新浏览器） devServer: { port: 3000, //=>创建服务指定的端口号 progress: true, //=>显示打包编译的进度 contentBase: './build', //=>指定当前服务处理资源的目录 open: true //=>编译完成后会自动打开浏览器 }复制代码
$ npm run serve $ yarn serve $ npx webpack-dev-server复制代码

5. html-webpack-plugin:

html-webpack-plugin 插件是用于编译 Webpack 项目中的 html 类型的文件，如果直接将 html 文件置于 ./src 目录中，用 Webpack 打包时是不会编译到生产环境中的。因为 Webpack 编译任何文件都需要基于配置文件先行配置的。

Webpack 插件使用三步曲：安装>引入>配置

npm&yarn 安装

$ npm install --save-dev html-webpack-plugin复制代码
$ yarn add html-webpack-plugin --dev复制代码

引入（接着在webpack.config.js 开始的地方引入）

let HtmlWebpackPlugin = require('html-webpack-plugin');复制代码

配置

module.exports = {
 ...,
 //=>在webpack中使用插件
 plugins: [
 //因为导入的插件是一个类，所以我们用的时候需要new 一下
 new HtmlWebpackPlugin({
 //=>指定自己的模板
 template: './src/index.html',
 //=>输出的文件名
 filename: 'index.html',
 //=>给引入的文件设置HASH戳（清除缓存的），也可以在output中设置 filename: 'bundle.[hash].js' 来生成不同的文件
 hash: true,
 //=>控制是否以及以何种方式最小化输出 
 //=>https://github.com/kangax/html-minifier
 //控制压缩
 minify: {
 collapseWhitespace: true,
 removeComments: true,
 removeAttributeQuotes: true,
 removeEmptyAttributes: true
 }
 })
 ]
}
复制代码

6. 使用加载器loader处理规则（处理样式）

官网： www.webpackjs.com/api/loaders…

安装

$ yarn add css-loader style-loader less less-loader autoprefixer postcss-loader （等等） -D复制代码

配置

module.exports = {
 //=>配置模块加载器LOADER
 module: {
 //=>模块规则：使用加载器（默认从右向左执行，从下向上）
 rules: [{
 test: /\.(css|less)$/, //=>基于正则表达式匹配哪些模块需要处理
 use: [
 "style-loader", //=>把CSS插入到HEAD中
 "css-loader", //=>编译解析@import/URL()这种语法
 "postcss-loader", //=>设置前缀
 {
 loader: "less-loader",
 options: {
 //=>加载器额外的配置
 }
 }
 ]
 }]
 }
}
复制代码

在 postcss.config.js 文件中

//这个文件需要配合postcss-loader使用
module.exports = {
 plugins: [
 require('autoprefixer')
 ]
};
复制代码

在 package.json 文件的末尾加入

//像这些" > 1%", "last 2 versions" 都是查询参数
"browserslist": [
 "> 1%",
 "last 2 versions"
]
复制代码

7. mini-css-extract-plugin 抽离CSS内容 (单独把css隔离出来并压缩)

安装

$ yarn add mini-css-extract-plugin optimize-css-assets-webpack-plugin uglifyjs-webpack-plugin -D复制代码

引入

let MiniCssExtractPlugin = require('mini-css-extract-plugin'),
 OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin'),
 UglifyjsWebpackPlugin = require('uglifyjs-webpack-plugin');复制代码

配置

module.exports = {
 //=>设置优化项
 optimization: {
 //=>设置压缩方式
 minimizer: [
 //=>压缩CSS（但是必须指定JS的压缩方式）
 new OptimizeCssAssetsWebpackPlugin(),
 //=>压缩JS
 new UglifyjsWebpackPlugin({
 cache: true, //=>是否使用缓存
 parallel: true, //=>是否是并发编译
 sourceMap: true, //=>启动源码映射（方便调试）
 })
 ]
 },
 plugins: [
 //=>使用插件
 new MiniCssExtractPlugin({
 //=>设置编译后的文件名字
 filename: 'main.css'
 })
 ],
 module: {
 rules: [{
 test: /\.(css|less)$/,
 use: [
 // "style-loader",
 //=>使用插件中的LOADER代替STYLE方式
 MiniCssExtractPlugin.loader,
 "css-loader",
 "postcss-loader",
 "less-loader"
 ]
 }]
 }
}
复制代码

8. 基于babel实现ES6的转换和ESLint语法检测

(当我们需要对于ES6中的一些语法进行处理)

安装

$ yarn add babel-loader @babel/core @babel/preset-env @babel/plugin-proposal-class-properties @babel/plugin-proposal-decorators @babel/plugin-transform-runtime -D复制代码
$ yarn add @babel/runtime @babel/polyfill复制代码
$ yarn add eslint eslint-loader -D复制代码

配置

module.exports = {
 ...,
 module: {
 rules: [...,{
 test: /\.js$/,
 use: [{
 loader: 'babel-loader',
 options: {
 //=>转换的语法预设（ES6->ES5）
 presets: [
 "@babel/preset-env"
 ],
 //=>基于插件处理ES6/ES7中CLASS的特殊语法
 plugins: [
 ["@babel/plugin-proposal-decorators", {
 "legacy": true
 }],
 ["@babel/plugin-proposal-class-properties", {
 "loose": true
 }],
 "@babel/plugin-transform-runtime"
 ]
 }
 }], //=>, "eslint-loader"
 //=>设置编译时忽略的文件和指定编译目录
 include: path.resolve(__dirname, 'src'),
 exclude: /node_modules/
 }]
 }
}
复制代码

9. 暴露全局 loader

（如果你想直接使用 jQuery或者 $）

安装

$ yarn add expose-loader -D复制代码

配置

//=>内联加载器
import jquery from 'expose-loader?$!jquery'; //这句话的意思就是将jquery以$的形式暴露给window
{
 //=>只要引入JQUERY就在全局注入$
 test: require.resolve('jquery'),
 use: ['expose-loader?