webpack 是一个模块打包工具（前提要安装 node使用npm来安装webpack）
注意npm在安装的时候速度很慢，建议用淘宝镜像
//第一安装淘宝 npm install -g cnpm --registry=https://registry.npm.taobao.org
//或者使用–registry参数指定镜像服务器地址，为了避免每次安装都需要--registry参数，可以使用如下命令进行永久设置： npm config set registry http://registry.npm.taobao.org
1、安装webpack,webpack-cli , webpack-dev-server
//全局安装 npm i webpack webpack-cli webpack-dev-server -g //查看webpack的信息 //webpack -v //局部安装 npm i webpack webpack-cli webpack-dev-server --save-d //查看webpack的信息 //npx webpack -v
2、webpack 的配置
添加webpack默认配置文件 webpack.config.js
//注意：这个文件名必须叫webpack.config.js如果需要改成别的名字，那么要用 npx webpack --config webpackconfig.js 这样就把配置文件改成webpackconfig.js了 //注意：在运行npx webpack命令时，webpack.config.js必须在当前目录下 const path = require('path'); module.exports = { //注意：这里是exports entry: { //打包的入口文件，即从哪个Js文件开始进行打包,这边是从src文件夹的index.js文件 'index': './src/index.js', //把./src/index.js路径下的文件打包成index.js 'main': './src/main.js' //把./src/main.js路径下的文件打包成main.js }, output: { // publicPath: 'https://www.cdn.cn', //表示把js文件全部放到指定的域名下，在引用的时候在添加上地址为前缀 filename: '[name].js', //打包好的文件命名
chunkFilename: '[name].chunk.js', //表示在入口文件中引用的文件打包到指定的文件名下，即间接加载的js文件 path: path.resolve(__dirname, 'dist') //这里的路径要用绝对路径，引入path模块，即文件放在dist文件夹下 },
resolve: {
extensions: ['.js', '.ts', '.tsx'] //表示书写的时候自动省略后缀，读取的时候自动获取，尽量在ts情况下应用， ts环境下需要配置
},
mode: 'development', // 这个工具是对js文件产生映射关系，方便排错 // inline表示生成的映射代码放到打包好的js文件中，如果没有，则另外产生一个映射文件 // cheap 表示不提示很祥细的错误位置，并且只检查业务代码 // module表示不仅对业务代码产生映射，还在loader和第三方库产生映射 // eval是应用js里的eval语法产生映射关系 // 最佳配置推荐：development => cheap-module-eval-source-map production => cheap-module-source-map devtool: 'cheap-module-eval-source-map', }
3、文件目录下的package.json配置（注意：json文件里是不允许注释的）
{ "name": "wp", "version": "1.0.0", "description": "", "private": true, //私有项目添加private声明 // "main": "index.js", //如果是私有的项目，可以关闭掉main的配置 "scripts": { "bundle": "webpack" //当在命令行里执行npm run bundle，那么系统自动从依赖里找webpack，并且执行npx webpack,那么这里就不用执行npx webpack了 }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "webpack": "^4.30.0", "webpack-cli": "^3.3.1", "webpack-dev-server": "^3.3.1" } }
4、loader的用法
loader 是模块打包工具，原本webpack是不提供如图片，文件等资源的打包，那么这时便可以引入模块打包工具，当在打包过程中，遇到不能打包的文件时，webpack就会引用相应的模块进行打包
//注意：这个文件名必须叫webpack.config.js如果需要改成别的名字，那么要用 npx webpack --config webpackconfig.js 这样就把配置文件改成webpackconfig.js了 //注意：在运行npx webpack命令时，webpack.config.js必须在当前目录下 const path = require('path'); module.exports = { //注意：这里是exports entry: './src/index.js', //打包的入口文件，即从哪个Js文件开始进行打包,这边是从src文件夹的index.js文件 output: { filename: 'test.js', //打包好的文件命名 path: path.resolve(__dirname, 'dist'), //这里的路径要用绝对路径，引入path模块，即文件放在dist文件夹下 }, mode: 'development', //当为production时会压缩代码，当为development时就不会压缩代码,默认是production module: { //webpack的模块打包工具 rules: [ //相应模块的打包规则 { test: /\.(png|jpg|gif)$/, //较验规则，以正则表达式来较验 use: { loader: 'file-loader' //调用的模块，首先要先安装file-loader eg: npm i file-loader -D; } } ] } }
举例：对应的js入口
import Img from '../assets/img/baidu.png' console.log(Img); // 会输出转义好的img图片 b15c113aeddbeb606d938010b88cf8e6.png let pic = document.createElement('img'); pic.src = Img; let elem = document.createElement('div'); elem.appendChild(pic); document.body.appendChild(elem);
file-loader 模块，以下代码是放在rules的数组里面，font文件也可以用file-loader来打包
{ test: /\.(png|jpg|gif)$/, //较验规则，以正则表达式来较验 use: { loader: 'file-loader', //调用的模块，首先要先安装file-loader eg: npm i file-loader -D; options: { //进行配置 name: '[name].[ext]', //注意：这里的内容要放在单引号里面，可以是[name],[hash],[path],后缀是[ext],更多祥见官网 // name: function(addr){ //这里可以是一个函数，接收一个地址的参数 // return 'abc.[name].[ext]'; // } outputPath: './image' //如果配置了outputPath那么就表示输出的路径在dist目录下的image文件夹下 } } }
url-loader模块，以下代码是放在rules的数组里面
// 这个插件会把文件转换成base64的代码，放在js文件里面，但是如果文件过大，那么会导致加载比较慢，建议只有小文件用这个loader { test: /\.(png|jpg|gif)$/, //较验规则，以正则表达式来较验 use: { loader: 'url-loader', //调用的模块，首先要先安装url-loader eg: npm i url-loader -D; options: { //进行配置 name: '[name].[ext]', //注意：这里的内容要放在单引号里面，可以是[name],[hash],[path],后缀是[ext],更多祥见官网 // name: function(addr){ //这里可以是一个函数，接收一个地址的参数 // return 'abc.[name].[ext]'; // } outputPath: './image', //如果配置了outputPath那么就表示输出的路径在dist目录下的image文件夹下 limit: 2048 //表示当图片或者文件只有2Kb的时候转成base64,否则就会像file-loader一样工作 } } }
style-loader，css-loader模块的使用
{ test:/\.css$/, //表示当遇到css文件的时候的处理方式 use: [ //use这时是以一个数组的形式应用，运行方式是从左到右，从下到上的，先运行css-loader再到style-loader 'style-loader', { loader: 'css-loader', options: { // importLoaders: 2, //表示在 css-loader 前应用的 loader 的数量，那么当sass中还有import的css样式时，那么同时也会走sass-loader和postcss-loader，如果没有sass-loader的时候可以不配置 modules: true //是否对css文件进行模块化管理，注意这里是modules } }, // 'sass-loader', //首先要安装sass-loader npm i sass-loader -D 前提要安装好style-loader 与 sass-loader 'postcss-loader' ] }
所对应的Js文件
import Img from '../assets/img/baidu.png'; import createElement from './createElement'; import style from './index.css'; createElement(); let pic = document.createElement('img'); pic.src = Img; pic.classList.add(style.set); //注意：如果是通用的标签，那么会作用于所有的对应元素，也可以用style['set'] pic.id = style.set; //如果要用里面的Id选择器，那么如右设置，那么id也会转成转码后的id let elem = document.createElement('div'); elem.appendChild(pic); document.body.appendChild(elem);
如果css是用sass来编写的，那么要添加sass-loader模块
{ test:/\.sass$/, //如果css是用sass来编写的，那么要改变规则 use: [ 'style-loader', { loader: 'css-loader', options: { importLoaders: 2 //表示在 css-loader 前应用的 loader 的数量，那么当sass中还有import的css样式时，那么同时也会走sass-loader和postcss-loader } }, 'sass-loader', //首先要安装sass-loader npm i sass-loader -D 前提要安装好style-loader 与 sass-loader 'postcss-loader' ] }
postcss-loader模块，这个模块是用来给特定的样式添加产商前缀如-webkit-
首先添加postcss-loader模块并且添加配置
{ test:/\.css/, //普通的css规则 use: ['style-loader', 'css-loader', 'postcss-loader'] //首先postcss-loader npm i postcss-loader -D }
添加一个配置文件postcss.config.js
module.exports = { plugins: [ require('autoprefixer') //首先要安装autoprefixer插件 npm i autoprefixer -D ] }
重新编译完后，就自动添加上产商的前缀了
5、plugins插件的应用
plugins 相当于webpack在生命周期函数里的某个期间运行的函数
html-webpack-plugin插件
new htmlWebpackPlugin({ title: 'index文件的标题', //输出的html的title设置 filename: 'index.html', //输出的html的文件名 template: './src/index.html', //引入template，这个可以指定一个html模板 showErrors: true, //当webpack报错的时候，会把错误信息包裹再一个pre中，默认是true。 // inject有四个值： true body head false // true =》 默认值，script标签位于html文件的 body 底部 // body =》 script标签位于html文件的 body 底部 // head =》 script标签位于html文件的 head中 // false =》 不插入生成的js文件，这个几乎不会用到的 inject: 'body', chunks: ['index'], //chunks主要用于多入口文件，当你有多个入口文件，那么数组里的值便是你需要选择打包进行的js文件包，如果不设置，则是全部显示 // excludeChunks: ['devor.js'], //排除掉一些js后全部打包 favicon: './assets/img/baidu.png', //给你生成的html文件生成一个 favicon ,值是一个路径 hash: true, //是否生成hash添加在引入文件地址的末尾，类似于我们常用的时间戳，比如最终引入是：<script type="text/javascript" src="bundle.049424f7d7ea5fa50656.js?049424f7d7ea5fa50656"></script>。这个可以避免缓存带来的麻烦 cache: true, //默认是true的，表示内容变化的时候生成一个新的文件 minify:{ caseSensitive: false, //是否大小写敏感 removeComments:true, // 去除注释 removeEmptyAttributes:true, // 去除空属性 collapseWhitespace: true //是否去除空格 } })
所对应的html的文件
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title><%= htmlWebpackPlugin.options.title %></title> </head> <body> </body> </html>
clean-webpack-plugin插件
plugins: [ new cleanWebpackPlugin({ //首先要安装clean-webpack-plugin,并且引入const {CleanWebpackPlugin} = require('clean-webpack-plugin'); cleanOnceBeforeBuildPatterns: ['./dist'] //这个插件的主要作用是清除上次打包的文件 该配置表示，清除上次建立的dist文件夹下的所有内容 }) ]
6、webpack-dev-server的使用
--watch的妙用
在package里面做中上配置，那么当有文件修改的时候就会自动重新打包
利用webpack-dev-server 进行自动化打包
首先安装 webpack-dev-server 利用命令行 npm i webpack-dev-server -D
devServer: { //前提在安装了webpack-dev-server后使用
contentBase: './dist', //打包后的文件目录
open: true, //是否在运行npm run start后自动打开浏览器
port: 8090, //配置端口号
hot: true, //启用 webpack 的模块热替换特性：
hotOnly: true, //替换失败后，是否重新刷新页面，一般与hot配置使用
proxy: { //在devServer服务器下进行反向代理
'/api': 'http://localhost:3000'
}
}
注意：如果配置了hot与hotOnly为true那么相对应的要开启webpack局部更新的插件
const webpack = require('webpack'); //要先引入webpack里的默认模块
//在Plugins里添加插件
plugins: [
new webpack.HotModuleReplacementPlugin()
]
在package.json做如下配置
"scripts": { "start": "webpack-dev-server" },
使用的时候用 npm run start 便可（注意：这个功能打包出来的dist文件是放面电脑内存中的，如果需要打包引出，那么需要运行另外webpack的命令）
7、webpack中使用Babel处理ES6语法
所需要准备的插件：参看 https://www.babeljs.cn/setup#installation
npm install --save-dev babel-loader @babel/core //建立加载器
npm install @babel/preset-env --save-dev //实现语法的转换
npm install --save @babel/polyfill //适配一些浏览器无法转换的ES6语法 注意使用这个要在入口文件顶部引入，如果配置usage，则无需引入，但需要安装 import "@babel/polyfill";
{ test: /\.js$/, exclude: /node_modules/, use: { loader: "babel-loader", options: { presets: [["@babel/preset-env", {"useBuiltIns": 'usage'}]] } } }
以上是在modules里配置的
8、分离出生产模式与开发模式的配置
首先安装webpack-merge --save-d模块实现配置的拼装 , 新建build文件夹，并且添加配置， 并且在build里添加三个js文件，修改package.json里的配置如下，
在打包有过程中有可能会提示以下内容：
WARNING: We noticed you're using the `useBuiltIns` option without declaring a core-js version. Currently, we assume version 2.x when no version is passed. Since this default version will likely change in future versions of Babel, we recommend explicitly setting the core-js version you are using via the `corejs` option. You should also be sure that the version you pass to the `corejs` option matches the version specified in your `package.json`'s `dependencies` section. If it doesn't, you need to run one of the following commands: npm install --save core-js@2 npm install --save core-js@3 yarn add core-js@2 yarn add core-js@3
这个时候就需要安装 npm install --save core-js@2 同时还要在babel中做如下配置，具体见代码：
"scripts": { "start": "webpack-dev-server --config ./build/webpack.dev.js", "build": "webpack --config ./build/webpack.pro.js" },
webpack.dev.js的内容如下
let path = require('path');
let commonConfig = require('./webpack.common');
let merge = require('webpack-merge');
let devConfig = {
mode: 'development',
devtool: 'cheap-module-eval-source-map',
devServer: {
contentBase: path.resolve('./', 'dist'),
port: 8090,
open: true
}
};
module.exports = merge(commonConfig, devConfig);
webpack.common.js的内容如下：（注意：不要配置resolve: extensions）
let path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin');
let {CleanWebpackPlugin} = require('clean-webpack-plugin');
module.exports = {
entry: {
index: path.resolve('./', 'src/index.js')
},
output: {
filename: '[name].js',
path: path.resolve('./', 'dist')
},
module: {
rules: [
{
test: /\.css$/,
exclude: /node_modules/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
modules: true
}
}
]
},
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: [["@babel/preset-env", {
"useBuiltIns": 'usage',
"corejs": 2 //对应上面的core.js的配置
}]]
}
}
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: path.resolve('./', 'src/temp/index.html'),
filename: 'index.html',
hash: true,
minify:{
caseSensitive: false, //是否大小写敏感
removeComments:true, // 去除注释
removeEmptyAttributes:true, // 去除空属性
collapseWhitespace: true //是否去除空格
}
}),
new CleanWebpackPlugin({
cleanOnceBeforeBuildPatterns: [path.resolve('./', 'dist')]
})
]
};
webpack.pro.js的内容如下
let merge = require('webpack-merge');
let commonConfig = require('./webpack.common');
let proConfig = {
mode: 'production',
devtool: 'cheap-module-source-map',
};
module.exports = merge(commonConfig, proConfig);
9、webpack 中的 code-spliting（代码分割）
添加配置如下：
optimization: { splitChunks: { chunks: "all" } },
代码分割与webpack无关，只是为了让网页响应速度更快
其实webpack底层应用了SplitChunksPlugin插件对代码进行分割（常用配置如下）：
optimization: { //默认配置如下： splitChunks: { chunks: "async", //async: 对异歩加载的文件进行分割，all对全部文件，initial对同步代码做分割 minSize: 30000, //开始化割的起点大小 这里的30000表示Bite maxSize: 0, //这个选项可配也可不配置，如果配置了，那么会对分割好的代码进行二次分割，通常不配置 minChunks: 1, //表示代码被调用了几次时进行代码分割 maxAsyncRequests: 5, //表示同时加载的类库是5个，如果多于5个的时候就不会进行代码分割了 maxInitialRequests: 3, //表示入口文件进行加载的时候，入口文件引入的库做代码分割最多只能分割出3个，多则不会进行分割了 automaticNameDelimiter: '~', //文件名连接符 name: true, //在cacheGroups里取的filename有效， 一般不会去更改这个配置 cacheGroups: { vendors: { test: /[\\/]node_modules[\\/]/, //判断第三方库是否是通过npm安装到node_modules下面，如果是则进行打包,打包生成的名字是vendor~name, 表示入口文件 priority: -10, //表示优先级，越是优先级越高在符合条件的情况下，就会被打包到对应的目录下 filename: 'vendors.js' //如果配置了该选项表示把所有的文件全部打包到vendors.js文件下 }, default: { //表示当打包条件满足的情况下，但是对应的js包又不在node_modules文件里面，那么就会走该配置 minChunks: 2, priority: -20, reuseExistingChunk: true, //表示已经被打包过了，那么就不再进行打包了 filename: 'common.js' //打包好的文件会旋转到common.js里面如果没有指定这个，则会生成default~name.js文件 } } } },
10、Lazy Loading 懒加载
实现懒加载可以利用ES7的async...await来实现，具体应用实例如下
//实现懒加载的方法可以利用ES7里的async... await来实现 let getMethod = async () => { let { default: _} = await import ('lodash'); console.log(_.add(2,3)); }; document.addEventListener('click', () => { getMethod(); }, false);
注意动态加载的这个方法，在IE9-IE11浏览器下会报错，暂未找到有效的解决办法，不过以上方法可以在谷歌浏览器下正常运行
11、CSS文件的代码分割
通常来讲，通过webpack来打包的css文件会被打包入js文件中，但是为了把js代码与css代码区别开，一般会把css文件和js文件进行分开打包， 这个时候就会用到MiniCssExtractPlugin这个插件来操作，并且从webpack4.0开始官方就推荐使用该插件
安装
npm i mini-css-extract-plugin --save-d
注意：这个插件是不支持热更新，也就是说，当进行了更改后，必需手动的去刷新页面来查看效果， 所以一般配置上线的时候才会进行配置
let MiniCssExtractPlugin = require('mini-css-extract-plugin');
let merge = require('webpack-merge');
let commonConfig = require('./webpack.common');
let proConfig = {
mode: 'production',
// devtool: 'cheap-module-source-map',
module: {
rules: [
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader, //在把包环境中把style-loader替换成这个loader
'css-loader'
]
},
]
},
plugins: [
new MiniCssExtractPlugin({
filename: '[name].css', //引用的css文件的名称
chunkFilename: '[name].chunk.css', //在直接引用的css文件中间接引入的文件
ignoreOrder: false //禁用警告
})
]
};
module.exports = merge(commonConfig, proConfig);
注意：以上打包的css文件是没有进行压缩的，如果想要对css文件进行压缩，那么需要引入 optimize-css-assets-webpack-plugin这个插件
//安装 npm i optimize-css-assets-webpack-plugin --save-d
在production环境中：
let MiniCssExtractPlugin = require('mini-css-extract-plugin');
let OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin'); //引入css样式压缩插件
let merge = require('webpack-merge');
let commonConfig = require('./webpack.common');
let proConfig = {
mode: 'production',
// devtool: 'cheap-module-source-map',
optimization: {
minimizer: [new OptimizeCSSAssetsPlugin({})], //实现css样式压缩
},
module: {
rules: [
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader, //在把包环境中把style-loader替换成这个loader
'css-loader'
]
},
]
},
plugins: [
new MiniCssExtractPlugin({
filename: '[name].css', //引用的css文件的名称
chunkFilename: '[name].chunk.css', //在直接引用的css文件中间接引入的文件
ignoreOrder: false //禁用警告
})
]
};
module.exports = merge(commonConfig, proConfig);
12、webpack与浏览器缓存的关系
在线上环境，当浏览器访问一个页面的时候，会对页面的库文件等进行缓存，这样当页面的更新的时候，会导致浏览器那边没有变化 ，原因是浏览器用的是缓存的旧
的代码，为了解决这个问题，可以在production的模式下配置出口文件的hash值，这个hash值且必需和内容相关联的，即contenthash，具体如下
output: { filename: '[name].[contenthash].js', chunkFilename: "[name].[contenthash].chunk.js", }
13、webpack中不兼容老的版本之间引入的的依赖问题
在一些老版本的库中，会对一些公共的工具类产生依赖，但是程序一般不会到node_modules中去更改旧的库文件，这个时候就需要一个中间件，帮忙引入所依赖的库
具体配置如下：
let webpack = require('webpack'); //首先引入webpack这个方法
plugins: [
...
new webpack.ProvidePlugin({
$: 'jquery', //表示当出现$这个符号时，会自动引入Jquery这个包
yf: ['jquery', 'merge'] //表求当出现yf这个符号时，会自动引入jquery并且调用里面的merge这个方法
})
]
注意：在模块中的this是指定object的，并非指向window,如果有需要的情况下，可以改变全部的this指向，这个时候就需要安装imports-loader这个模块并且添加到module中，如果有安装babel依赖，那么就可以放在其后面，具体语法 loader: 'imports-loader? this=>window';
14、环境变量的使用
环境变量即在使用webpack进行配置的时候可以定义一些全局变量，配置会根据在全局范围内配置的变量进行全局调用
比如在package.json中配置一个set变量
"scripts": { "test": "webpack --config ./build/webpack.dev.js", "start": "webpack-dev-server --env.set=areyouok --config ./build/webpack.dev.js", "build": "webpack --config ./build/webpack.pro.js" },
那么调用的时候
module.exports = env => { console.log(env.set); //在打包的时候就会输出这个值，如果没有设定值，默认就会是true return merge(commonConfig, devConfig); };
可以利用这个特性，在打包环境中配置一个变量，这样就可以根据变量的值的变化自动选择打包的环境，如下：
15、library 工具库打包的注意点
通常来讲如果打包工具库方便别人的调用，会在output那进行配置，需要添加的配置有：
externals: ['lodash'], //如果库有第三方依赖的情况下，假定以lodash为例，那么就可以把lodash排除在外，无需打包到库里，祥细配置见官网 output: { path: path.resolve('./', 'dist'), library: 'library', //添加这个配置后可以通过<script src ='library.js'></script>进行引入 libraryTarget: 'umd' //添加这个配置后可以通过import library from 'library', let library from 'library'进行引入 },
16、typescript配置
a、在作用typescript的时候必需安装typescript可以使用以下命令
npm i typescirpt --save-d
b、在搭建好webpack环境后安装ts-loader使用以下命令
npm i ts-loader --save-d
c、在项目中进行typescript的项目初始化 tsc --init生成tsconfig文件
在webpackconfig中添加配置
{ test: /.tsx?$/, use: 'ts-loader', exclude: /node_modules/ },
注意：在使用一些js的库时需要引入typescript版本的可能用以下方法
//查询 以jquery为例 npm view @types/jquery versions //安装 npm i @types/jquery --save-d
如果在webpack中使用typescript开发node,那么还需要在webpack中添加配置target: 'node', 同时修改配置如下图：
17、使用webpackDevServer进行请求打包
在开发环境中，为了更好的进行测试，就需要引入一些测试数据，但是正式代码中的ajax请求的地址一般不进行随便更改，这个时候就需要引入devServer中的proxy进行请求的代理
假如请求的代码如下
import axios from 'axios'; axios.get('/learn/test.php').then((res) => { console.log(res); }).catch(error => { console.log(error); });
那么在proxy中实际要转接是http://localhost:80/learn/test.php,那么可以做如下配置
devServer: { contentBase: path.resolve('./', 'dist'), port: 8090, open: true, proxy: { '/learn': 'http://localhost:80' } },
注意以上代码会进行一次拼接，即返回地址：'http://localhost:80/learn' 对get请求里的 '/learn' 进行替换即在开发环境中实际请求的是'http://localhost:80/learn/test.php'这个地址；
如果进行比较完整性的配置
devServer: { contentBase: path.resolve('./', 'dist'), port: 8090, open: true, proxy: { '/api': { target: 'http://localhost:80/', //想要请求的数据地址 pathRewrite:{ '^/api': '', //通常拼接后的数据地址是http://localhost:80/learn,如果想拼接为http://localhost:80即可做该替换 'header.json': 'data.json', //表示遇到header.json时转成请求data.json }, secure: false, //表示接受运行在 HTTPS 上，且使用了无效证书的后端服务器的数据 changeOrigin: true, //通常该选项会配置成true header: { //如果想要通过请求头携带验证信息，那么可以配置该参数 cookie: '123456' } } } },
如果想要进行多个配置，那么可以改成以下写法
devServer: { contentBase: path.resolve('./', 'dist'), port: 8090, open: true, proxy: [{ context: ['/learn'], target: 'http://localhost:80' }] },
20、在vue-cli3中可以进行简单的配置
let path = require('path')
module.exports = {
lintOnSave: false,
publicPath: process.env.NODE_ENV === 'production' ? '/production-sub-path/' : '/',
chainWebpack: config => {
config.resolve.alias.set('@', path.resolve(__dirname, 'src')).set('_c', path.resolve(__dirname, 'src/components'))
},
productionSourceMap: false
}
