webpack基础二
1.plugin(插件)
1.1 基本概念
<!--
1.什么是插件(plugin)?
plugin 用于扩展webpack的功能
当然loader也是变相的扩展了webpack ，但是它只专注于转化文件这一个领域。
而plugin的功能更加的丰富，而不仅局限于资源的加载。
-->
1.2 html-plugin使用
<body>
<!--
2.什么是HtmlWebpackPlugin?
HtmlWebpackPlugin会在打包结束之后自动创建一个index.html, 并将打包好的JS自动引入到这个文件中
而在以前的项目中,我们打包好以后都得自己创建html,自己引入
3.HtmlWebpackPlugin使用
https://www.webpackjs.com/plugins/html-webpack-plugin/
3.1安装HtmlWebpackPlugin
npm install --save-dev html-webpack-plugin
3.2配置HtmlWebpackPlugin
const HtmlWebpackPlugin = require('html-webpack-plugin');
然后在配置文件中的新增如下配置
作用:plugins: 告诉webpack需要新增一些什么样的功能
plugins: [new HtmlWebpackPlugin()]
4.HtmlWebpackPlugin高级使用
https://github.com/jantimon/html-webpack-plugin#configuration
默认情况下HtmlWebpackPlugin生成的html文件是一个空的文件,
如果想指定生成文件中的内容可以通过配置模板的方式来实现
plugins: [new HtmlWebpackPlugin({
template: "index.html"
})]
默认情况下生成html文件并没有压缩,
如果想让html文件压缩可以设置
new HtmlWebpackPlugin({
template: "index.html",
minify: {
collapseWhitespace: true
}
})]
-->
</body>
1.3 clean-plugin
<body>
<!--
1.什么是clean-webpack-plugin?
webpack-clean-plugin会在打包之前将我们指定的文件夹清空
应用场景每次打包前将dist目录清空, 然后再存放新打包的内容, 避免新老混淆问题
比如我们开始使用了一张叫a的图片,打包后会将a放进打包后的文件中,后来用了b图片而不用a,如果不使用clean-webpack-plugin再次打包了文件,就会在打包后的文件中出现a和b两张图片
3.clean-webpack-plugin使用
https://github.com/johnagan/clean-webpack-plugin
3.1安装clean-webpack-plugin
npm install --save-dev clean-webpack-plugin
3.2配置clean-webpack-plugin
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
plugins: [new CleanWebpackPlugin()]
-->
</body>
1.4 copy-plugin使用
<body>
<!--
1.什么是copy-webpack-plugin?
在打包项目的时候除了JS/CSS/图片/字体图标等需要打包以外, 可能还有一些相关的文档也需要打包
文档内容是固定不变的, 我们只需要将对应的文件拷贝到打包目录中即可
那么这个时候我们就可以使用copy-plugin来实现文件的拷贝
3.copy-webpack-plugin使用
https://www.webpackjs.com/plugins/copy-webpack-plugin/
3.1安装copy-webpack-plugin
npm install --save-dev copy-webpack-plugin
3.2配置copy-webpack-plugin
const CopyWebpackPlugin = require('copy-webpack-plugin');
plugins: [new CopyWebpackPlugin([
//如下操作将当前目录下的doc文件打包到打包后的doc文件下
{from:"./doc", to:"doc"}
])];
-->
</body>
1.5 css-plugin使用
<body>
<!--
1.什么是mini-css-extract-plugin?
mini-css-extract-plugin是一个专门用于将打包的CSS内容提取到单独文件的插件,打包完了之后就自己将打包好的css文件引入到html文件了
> 前面我们通过style-loader打包的CSS都是直接插入到head中的
2.mini-css-extract-plugin使用
https://webpack.js.org/plugins/mini-css-extract-plugin/
2.1mini-css-extract-plugin安装
npm install --save-dev mini-css-extract-plugin
2.2配置mini-css-extract-plugin
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
new MiniCssExtractPlugin({
filename: './css/[name].css',
})
2.3替换style-loader
loader: MiniCssExtractPlugin.loader,
注意点: 如果相关文件资源无法显示, 需要根据打包后的结构手动设置公开路径
options: {
publicPath:"xxx"
}
-->
</body>
1.6 压缩css代码
<body>
<!--
3.mini-css-extract-plugin压缩css
https://www.npmjs.com/package/mini-css-extract-plugin
3.1安装JS代码压缩插件
npm install --save-dev terser-webpack-plugin
3.2安装CSS代码压缩插件
npm install --save-dev optimize-css-assets-webpack-plugin
3.3导入插件
const TerserJSPlugin = require('terser-webpack-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
3.4配置webpack优化项
optimization: {
minimizer: [new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})],
}
注意: 由于配置了webpack的optimization.minimizer项目会覆盖默认的JS压缩选项,
所以JS代码也需要通过插件自己压缩
-->
</body>
2.webpack-watch使用
<body>
<!--
1.什么是watch?
在以前打包完项目后,如果修改了内容后就需要再次重新打包,
webpack 可以监听打包文件变化，当它们修改后会重新编译打包
那么如何监听打包文件变化呢? 使用 watch
2.watch相关配置watchOptions
watch: true, //默认为false,改为true就能识别文件的变化
watchOptions: {
aggregateTimeout: 300, // 防抖, 和函数防抖一样, 改变过程中不重新打包, 只有改变完成指定时间后才打包
poll: 1000, // 每隔多少时间检查一次变动
ignored: /node_modules/ // 排除一些巨大的文件夹, 不需要监控的文件夹例如 node_modules
},
-->
</body>
3.dev-server使用
3.1基本使用
<body>
<!--
1.什么是webpack-dev-server?
webpack-dev-server和watch一样可以监听文件变化
webpack-dev-server可以将我们打包好的程序运行在一个服务器环境下
webpack-dev-server可以解决企业开发中"开发阶段"的跨域问题
所以在开发时我们一般用dev-server而不是用watch,但是dev-server打包后不会将bundle文件放在当前目录下,
后边谈论这个问题
2.webpack-dev-server使用
2.1安装webpack-dev-server
https://www.npmjs.com/package/webpack-dev-server
npm install webpack-dev-server --save-dev
2.2配置webpack-dev-server
devServer: {
contentBase: "./bundle", // 打包后的目录
open: true, // 是否自动在浏览器中打开
port: 9090 // 服务器端口号
}
同时需要将package文件中的test修改为以下
"test": "npx webpack-dev-server --config webpack.config.js"
-->
</body>
3.2 dev-server解决跨域问题
<body>
<!--
1.前端跨域问题?
同源策略（Same origin policy）是一种约定，它是浏览器最核心也最基本的安全功能
所谓同源是指: 协议，域名，端口都相同,就是同源, 否则就是跨域
http://127.0.0.1:8080
http://127.0.0.1:8080 // 同源
http://127.0.0.1:8080
http://127.0.0.1:9090 // 跨域
2.利用webpack-dev-server代理解决跨域问题
devServer: {
contentBase: "./dist",
open: true,
port: 9090,
proxy: {
// 所有user开头的请求都会被代理到target
// 例如: 我们发送请求地址: http://127.0.0.1:9090/user
// 实际发送请求地址: http://127.0.0.1:3000/user
"/user": {
target: "http://127.0.0.1:3000", // 代理地址
changeOrigin: true, // 域名跨域
secure: false, // https跨域
}
}
}
当我们发送很多请求时,如果采用上面的写法就会出现很多重复的代码,这是我们可以采用以下写法
其中有一个路径重写,什么时候用呢,在开发项目时,前后端是同时编写的,如果后端的路径变了,我们前端就发不来请求了
这就需要路径重写(后面有具体例子)
3.利用webpack-dev-server重写请求路径
proxy: [{
context: ["/user", "/login"],
target: "http://127.0.0.1:3000",
changeOrigin: true, // 域名跨域
secure: false, // https跨域
pathRewrite:{"": "/api"} // 路径重写, 会给请求路径前添加一个/api
}]
-->
<!--
常用配置附录
target：要使用url模块解析的url字符串
forward：要使用url模块解析的url字符串
agent：要传递给http（s）.request的对象（请参阅Node的https代理和http代理对象）
ssl：要传递给https.createServer（）的对象
ws：true / false，是否代理websockets
xfwd：true / false，添加x-forward标头
secure：true / false，是否验证SSL Certs
toProxy：true / false，传递绝对URL作为路径（对代理代理很有用）
prependPath：true / false，默认值：true - 指定是否要将目标的路径添加到代理路径
ignorePath：true / false，默认值：false - 指定是否要忽略传入请求的代理路径（注意：如果需要，您必须附加/手动）。
localAddress：要为传出连接绑定的本地接口字符串
changeOrigin：true / false，默认值：false - 将主机标头的原点更改为目标URL
-->
</body>
基于以上的概念,我们来具体写一个小的解决跨域问题的例子
首先来配置一个简单服务器(根据前面nodejs所学)
const http = require("http");
http.createServer(function (req, res) {
if(req.url.startsWith("/api/user") && req.method.toLowerCase() === "get"){
res.writeHead(200, {
"Content-Type": "text/plain; charset=utf-8"
});
res.end("知播渔666");
}else if(req.url.startsWith("/api/login") && req.method.toLowerCase() === "get"){
res.writeHead(200, {
"Content-Type": "text/plain; charset=utf-8"
});
res.end("指趣学院666");
}
}).listen(3000);
然后我们发送get请求
import $ from "jquery";
/*
当前发送请求的地址: http://127.0.0.1:9090/user
服务端的地址: http://127.0.0.1:3000/api/user
所以我们就通过
*/
$.get("/user", function (result) {
console.log(result);
});
$.get("/login", function (result) {
console.log(result);
});
在webpack.config中的配置如下
proxy: [{
context: ["/user", "/login"],
target: "http://127.0.0.1:3000",
changeOrigin: true, // 域名跨域
secure: false, // https跨域
pathRewrite:{"": "/api"} // 如上服务端已经将路径改成了/api/user，但是我们请求时任然能够成功
}]
/*
注意点:
devServer只能解决开发阶段的跨域问题, 并不能解决项目上线之后的跨域问题
原因非常简单, 因为项目上线之后是将打包好的文件上传到服务器, 而打包好的文件中并没有devServer
所以项目上线之后要想解决跨域问题还是需要依赖后端开发人员
*/
4.HMR-热更新插件
4.1 css的更新
<body>
<!--
1.什么是HMR?
1.1通过webpack-dev-server自动打包并没有真正的放到指定的目录中
因为读写磁盘是非常耗时和消耗性能的,
所以为了提升性能webpack-dev-server将转换好的内容直接放到了内存中
1.2通过webpack-dev-server可以实现实时监听打包内容的变化,
每次打包之后都会自动刷新网页, 但是正是因为每当内容被修改时都会自动刷新网页
所以给我们带来了很多不便, 这时就需要通过HMR插件来优化调试开发
有什么不便呢,举个例子,比如一个网页,我们通过点击按钮动态创建段落,每次点击按钮就创建一个新的段落,这时如果我们修改了css代码,对段落的样式进行操作,dev-server检测到文件的变化,他就自动刷新了,我们想看见样式的变化,还得再重新点击创建.
1.3HMR(HotModuleReplacementPlugin)热更新插件,
会在内容发生改变的时候时时的更新修改的内容但是不会重新刷新网站
2.HMR使用:
HotModuleReplacementPlugin是一个内置插件, 所以不需要任何安装直接引入webpack模块即可使用
2.1在devServer中开启热更新
hot: true, // 开启热更新
hotOnly: true // 即使热更新不生效，浏览器也不自动刷新
2.2在webpack.config.js中创建热更新插件
new Webpack.HotModuleReplacementPlugin()
3.注意点:
如果是通过style-loader来处理CSS, 那么经过前面两步就已经实现了热更新
如果是通过MiniCssExtractPlugin.loader来处理CSS, 那么还需要额外配置MiniCssExtractPlugin.loader
options:{
hmr: true
}
-->
</body>
4.2 js的更新
<body>
<!--
1.JS模块使用HMR注意点?
import "./index.less"
对于css模块而言, 在css-loader中已经帮我们实现了热更新, 只要css代码被修改就会立即更新
import copy from "./test.js"
但是对于js模块而言, 系统默认并没有给我们实现热更新, 所以修改了js模块代码并不会立即更新
2.JS模块如何实现热更新?
2.1手动监听模块变化（注意此模块写在引入js的文件中，比如index引入test那就写在index中）
if(module.hot){ // 判断是否开启热更新
module.hot.accept("./test.js", function () { // 监听指定JS模块变化
});
}
2.2手动编写模块变化后的业务逻辑
if(module.hot){
module.hot.accept("./test.js", function () {
let div = document.querySelector("div");
console.log(div);
document.body.removeChild(div);
copy();如此一来，我们改变了test.js的内容后，网页也会更新了。
});
}
-->
</body>
5. bable的使用
5.1 转换ES678语法到低级
<body>
<!--
1.webpack-ES6语法处理
在企业开发中为了兼容一些低级版本的浏览器, 我们需要将ES678高级语法转换为ES5低级语法
否则在低级版本浏览器中我们的程序无法正确执行
默认情况下webpack是不会将我们的代码转换成ES5低级语法的, 如果需要转换我们需要使用babel来转换
2.如何使用babel?
https://babeljs.io/
2.1安装转换到ES5的相关包
npm install --save-dev babel-loader @babel/core @babel/preset-env
2.2配置babel
{
test: /\.js$/,
exclude: /node_modules/, // 不做处理的目录
loader: "babel-loader",
options: {
presets: ["@babel/preset-env"],
},
}
-->
<!--
3.presets优化:
在实际企业开发中默认情况下babel会将所有高于ES5版本的代码都转换为ES5代码
但是有时候可能我们需要兼容的浏览器已经实现了更高版本的代码, 那么这个时候我们就不需要转换
因为如果浏览器本身已经实现了, 我们再去转换就会增加代码的体积,就会影响到网页的性能
所以我们通过配置presets的方式来告诉webpack我们需要兼容哪些浏览器
然后babel就会根据我们的配置自动调整转换方案, 如果需要兼容的浏览器已经实现了, 就不转换了
https://babeljs.io/docs/en/babel-preset-env
presets: [["@babel/preset-env",{
targets: {
"chrome": "58",
"ie": "10"
},
}]],
-->
</body>
5.2 babel-实现低版本语法
<body>
<!--
4.利用babel实现低版本语法
对于有对应关系的语法而言, 经过我们上节课的配置就已经能够实现自动转换了
但是对于没有对应关系的语法而言, 经过我们上节课的配置还不能实现自动转换
什么叫有对应关系, 什么叫做没有对应关系?
有对应关系就是指ES5中有对应的概念, 例如: 箭头函数对应普通函数, let对应var, 这个就叫做有对应关系
没有对应关系就是指E5中根本就没有对应的语法, 例如Promise, includes等方法是ES678新增的
ES5中根本就没有对应的实现, 这个时候就需要再增加一些额外配置, 让babel自己帮我们实现对应的语法
4.1安装不存在代码的实现包
npm install --save @babel/polyfill
4.2在用到不存在代码的文件中导入包
import "@babel/polyfill";
注意点:
如果导入了polyfill,那么无论我们有没有用到不存在的语法都会打包到文件中
但是这样会增加打包后文件的大小, 我们希望的是只将用到的不存在语法打包到文件中
那么就需要在webpack.config.js中再配置一下
presets: [["@babel/preset-env",{
targets: {
"chrome": "58",
"ie": "10"
},
useBuiltIns: "usage" 这样就会只打包用到的语法
}]]
-->
</body>
5.3 babel-实现低版本语法注意点
<body>
<!--
1.直接在文件中导入polyfill模块的弊端
直接导入polyfill的方式只适用于一般项目开发, 但是如果是在编写一些第三方模块的时候这种方式会出现一些问题
因为这种方式是通过全局变量的方式来注入代码, 会污染全局环境. 所以我们再来看一下polyfill的第二种配置方式
2.第二种配置方式
2.1安装相关模块
npm install --save @babel/polyfill
npm install --save-dev @babel/plugin-transform-runtime
npm install --save @babel/runtime
2.2配置相关信息
在webpack.config里边的配置js的options里面添加如下参数
plugins: [
["@babel/plugin-transform-runtime",
{
"absoluteRuntime": false,
"corejs": 2,
"helpers": true,
"regenerator": true,
"useESModules": false
}
]
]
注意点:
"corejs": false, 还是全局注入,还是会污染全局环境
"corejs": 2, 则不会污染全局环境
npm install --save @babel/runtime-corejs2
-->
<!--
// 转换前
function sleep(ms) {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve()
}, ms)
})
}
// "corejs": false转换后
require("core-js/modules/es6.promise"); // 全局引入
function sleep(ms) {
return new Promise(function (resolve, reject) {
setTimeout(function () {
resolve();
}, ms);
});
}
// "corejs": 2转换后
var _interopRequireDefault = require("@babel/runtime-corejs2/helpers/interopRequireDefault");
var _promise = _interopRequireDefault(require("@babel/runtime-corejs2/core-js/promise")); // 独立变量, 局部引入
function sleep(ms) {
return new _promise.default(function (resolve, reject) {
setTimeout(function () {
resolve();
}, ms);
});
}
-->
</body>
5.4 babel-使用技巧
<body>
<!--
1.babel-使用技巧
1.1查看错误提示
1.2根据错误信息查询文档
1.3根据文档缺什么安装配置什么
-->
</body>
6.打包html引用的图片
<body>
<!--
1.什么是html-withimg-loader?
我们通过file-loader或者url-loader已经可以将JS或者CSS中用到的图片打包到指定目录中了
但是file-loader或者url-loader并不能将HTML中用到的图片打包到指定目录中
所以此时我们就需要再借助一个名称叫做"html-withimg-loader"的加载器来实现HTML中图片的打包
2.html-withimg-loader使用
https://www.npmjs.com/package/html-withimg-loader
2.1安装html-withimg-loader
npm install html-withimg-loader --save
2.2配置html-withimg-loader
{
test: /\.(htm|html)$/i,
loader: 'html-withimg-loader'
}
-->
</body>
7. 图片压缩和合并
7.1图片压缩
<body>
<!--
1.图片压缩和合并
在企业开发中为了提升网页的访问速度, 我们除了会压缩HTML/CSS/JS以外
还会对网页上的图片进行压缩和合并, 压缩可以减少网页体积, 合并可以减少请求次数
-->
<!--
1.压缩打包之后的图片
每次在打包图片之前,我们可以通过配置webpack对打包的图片进行压缩, 以较少打包之后的体积
2.如何压缩图片?
利用image-webpack-loader/img-loader压缩图片
https://www.npmjs.com/package/image-webpack-loader
2.1安装npm install image-webpack-loader --save-dev
2.2在webpack打包图片规则增加如下
{
loader: 'image-webpack-loader',
options: {
mozjpeg: {
progressive: true,
//压缩的质量,越小越不好
quality: 65
},
// optipng.enabled: false will disable optipng
optipng: {
enabled: false,
},
pngquant: {
quality: [0.65, 0.90],
speed: 4
},
gifsicle: {
interlaced: false,
},
// the webp option will enable WEBP
webp: {
quality: 75
}
}
},
https://www.npmjs.com/package/img-loader
-->
</body>
7.2 图片合并
<body>
<!--
1.将打包之后的图片合成精灵图
过去为了减少网页请求的次数, 我们需要"UI设计师"给我们提供精灵图,
并且在使用时还需要手动的去设置每张图片的位置
但是有了webpack之后我们只需要让"UI设计师"给我们提供切割好的图片
我们可以自己合成精灵图, 并且还不用手动去设置图片的位置
2.如何合并图片
首先我们在html中写了四个div,给他们设置背景图片,这几个图片都是独立的,然后我们通过一下插件合并图片
利用postcss-sprites/webpack-spritesmith合并图片
https://www.npmjs.com/package/postcss-sprites
3.来看通过postcss-sprites
3.1.安装npm install --save-d postcss-sprites postcss
3.2.在我们以前配置自动添加前缀那个postcss文件配置如下
"postcss-sprites": {
// 告诉webpack合并之后的图片保存到什么地方
spritePath: "./bundle/im
}
3.3.以上就可以实现合并,但是有一个路径问题,webpack打包之后给我们的都是相对路径
但是正是因为是相对路径, 所以会导致在html中使用的图片能够正常运行, 在css中的图片不能正常运行,
因为打包后的图片路径是从css下找images文件
例如: 打包之后的路径是 images/lnj.jpg
那么在html中, 会去html文件所在路径下找images,正好能找到所以不报错
但是在css中, 会去css文件所在路径下找images, 找不到所以报错
|---bundle
|---css
|---index.css
|---js
|---index.js
|---images
|---lnj.jpg
|---index.html
解决方案
在开发阶段将publicPath设置为dev-server服务器地址
我们可以通过在打包图片的规则中的options中使用publicPath来设置
publicPath:http://127.0.0.1:9090/images
在不使用dev-server打包时可通过如下
publicPath: "http://localhost:63342/Git-Webpack/Webpack/34-webpack-图片合并/bundle/images"
在上线阶段将publicPath设置为线上服务器地址
在来看一个问题
我们又在html中写了四个div,在css设置了背景图片后,打包后会将这四个图片和以前四个图片合并到一起,
如果不想合并到一起,就需要在postcss中设置分组方式
// 告诉webpack合并图片的时候如何分组，比如我们在images下有多个分组，以下就实现了按不同的分组合并图片的功能。
groupBy: function (image) {
这个回调函数会传给一个image对象
// url: '../images/animal/animal1.png',
let path = image.url.substr(0, image.url.lastIndexOf("/"));//../images/animal
let name = path.substr(path.lastIndexOf("/") + 1);//animal
将文件图片所在文件夹的名字传给promise
return Promise.resolve(name);
}
有时我们需要过滤一下图片,哪些需要合并,哪些不需要
filterBy: function (image) {
let path = image.url;
//如果是以png结尾的就合并
if(!/\.png$/.test(path)){
return Promise.reject();
}
return Promise.resolve();
}
https://www.npmjs.com/package/webpack-spritesmith
-->
</body>
8.eslint代码检测
<body>
<!--
1.什么是eslint?
ESLint 是一个插件化的 javascript 代码检测工具，
它可以用于检查常见的 JavaScript 代码错误，也可以进行"代码规范"检查，
在企业开发中项目负责人会定制一套 ESLint 规则，然后应用到所编写的项目上，
从而实现辅助编码规范的执行，有效控制项目代码的质量。
在编译打包时如果语法有错或者有不符合规范的语法就会报错,并且会提示相关错误信息
2.如何使用eslint
2.1对应环境和loader
npm install eslint --save-dev
npm install eslint-loader --save-dev
2.2在webpack文件中配置eslint
https://www.webpackjs.com/loaders/
{
// 由于loader是从右至左从下至上执行
// 而如果先执行了babel-loader就会对我们的代码进行转换
// 而我们想检查代码规范的代码并不是转换之后的代码
// 所以通过enforce: 'pre'告诉webpack在所有loader执行之前执行
enforce: 'pre',
test: /\.js$/,
exclude: /node_modules/, // 排除不检查的文件夹
include: path.resolve(__dirname, 'src'), // 指定检查的文件夹
loader: 'eslint-loader',
options: {
// eslint options (if necessary)
//以下代码加进去当发现错误时会自动修复,但是是在打包时修复的,想要编码时修复,看下面
fix: true
}
},
2.3 配置编码规范
http://eslint.cn/ 官网中点击用户指南->配置
了解到需要新建一个文件来配置,文件名为.eslintrc.js(项目经理会给我们的)
// .eslintrc.js
// https://eslint.org/docs/user-guide/configuring
module.exports = {
/*
不重要,永远写true
* */
root: true,
parserOptions: {
// parser: 'babel-eslint',
/*
默认设置为 3，5（默认）， 你可以使用 6、7、8、9 或 10 来指定你想要使用的 ECMAScript 版本
* */
"ecmaVersion": 10,
/*
设置为 "script" (默认) 或 "module"（如果你的代码是 ECMAScript 模块)。
* */
"sourceType": "module",
/*
ecmaFeatures - 这是个对象，表示你想使用的额外的语言特性:
globalReturn - 允许在全局作用域下使用 return 语句
impliedStrict - 启用全局 strict mode (如果 ecmaVersion 是 5 或更高)
jsx - 启用 JSX
* */
"ecmaFeatures": {}
},
// 指定代码运行的宿主环境
env: {
browser: true, // 浏览器
node: true, // node
/*
支持 ES6 语法并不意味着同时支持新的 ES6 全局变量或类型（比如 Set 等新类型）。
对于 ES6 语法，使用 { "parserOptions": { "ecmaVersion": 6 } }
* */
es6: true,
},
extends: [
/*
引入standard代码规范
* */
// https://github.com/standard/standard/blob/master/docs/RULES-en.md
'standard'
],
/*
扩展或覆盖规则
* */
rules: {
// 强制语句结束添加，分号
semi: ["error", "always"],
// 强制缩进2个空格
indent: ["error", 4],
// 方法名和刮号之间不加空格
'space-before-function-paren': ['error', 'never'],
"no-unexpected-multiline": "off"
}
};
3.如何提升开发效率
通过阅读打包错误信息来修复不符合规范语法非常低效
所以我们可以通过webstrom插件来帮我们完成提示
webstrom--setting--eslint--autoxxx
发现错误时右键最下面fixxxx就能like修复
-->
</body>
9.webpack配置文件优化
<body>
<!--
1.区分开发环境和线上环境
1.1在开发阶段我们为了提升运行效率以及调试效率, 一般会通过dev-server来打包
在开发阶段我们为了提升打包效率,不会对打包的内容进行压缩
... ...
1.2在上线阶段我们需要拿到真实的打包文件, 所以不会通过dev-server来打包
在上线阶段我们为了提升访问的效率, 所以在打包时需要对打包的内容进行压缩
... ...
1.3但是当前我们将"开发环境和线上环境"的配置都写到了一个文件中, 这样非常不利于我们去维护配置文件
所以我们需要针对不同的环境将不同的配置写到不同的文件中
2.区分开发环境和线上环境优化
区分完不同环境配置文件之后发现两个文件之间存在大量重复配置
这我们可以利用webpack-merge模块来实现冗余代码的抽离和合并进一步优化配置文件
2.1将冗余代码抽取到 webpack.config.common.js中
2.2 将只在开发阶段使用的代码放到webpack.config.dev.js,将只在上线用的代码放到webpack.config.prod.js
2.3在dev.js和prod.js中导入common.js, 利用merge合并即可
2.4 修改package.json
"start": "npx webpack-dev-server --config webpack.config.dev.js",
"dev": "npx webpack --config webpack.config.dev.js",
"prod": "npx webpack --config webpack.config.prod.js"
-->
</body>
网友评论