webpack学习笔记
安装
全局不推荐
npm install webpack webpack-cli -g//webpack-cli 可以帮助我们在命令行⾥使⽤npx ,webpack等相关指令 webpack -v
局部安装 项⽬内安装
npm install webpack webpack-cli --save-dev //-D webpack -v //command not found 默认在全局环境中查找 npx webpack -v// npx帮助我们在项⽬目中的node_modules⾥查找webpack
安装指定版本
npm info webpack//查看webpack的历史发布信息 npm install webpack@x.xx webpack-cli -D
webpack 配置文件
webpack有默认的配置文件，叫webpack.config.js，我们可以对这个文件进行修改，进行个性化配置，也可以不使用默认的配置文件。
默认的配置文件:webpack.config.js
npx webpack //执行命令后，webpack会找到默认的配置文件，并使用执行
不使用默认的配置文件: webpackconfig.js
npx webpack --config webpackconfig.js //指定webpack使用webpackconfig.js文件来作为 配置文件并执行
Webpack 的核⼼心概念
entry
指定打包⼊⼝口文件
entry:{ main: './src/index.js' } ===== entry:"./src/index.js"
output
打包后的文件位置
output: { publicPath:"xxx", filename: "bundle.js", // 必须是绝对路路径 path: path.resolve(__dirname, "dist") }
loader
webpack是模块打包工具，默认只知道如何处理js模块，⽽模块不仅仅是js，还可以是css，图片或者其他格式 ，那么其他格式的模块处理，和处理方式就需要loader了。
当webpack处理到不认识的模块时，需要在webpack中的module处进行配置，当检测到是什么格式的模块，使用什么loader来处理。
module: { rules: [ { test: /\.xxx$/, loader: 'xxx-loader', options: { ... } } ] },
常用loader
处理静态资源：
file-loader:处理静态资源模块。
原理是把打包⼊⼝口中识别出的资源模块，移动到输出⽬目录，并且返回一个地址名称。所以我们什什么时候用file-loader呢?场景:就是当我们需要模块，仅仅是从源代码挪移到打包⽬目录，就可以使用file-loader来处理，txt，svg，csv，excel，图片资源啦等等。
npm install file-loader -D
module: { rules: [ { test: /\.(png|jpe?g|gif)$/, loader: 'file-loader', options: { name: "[name]_[hash].[ext]",//[name]⽼资源模块的名称,[ext]老资源模块的后缀 outputPath: 'img/'//打包后的存放位置 } } ] },
url-loader
可以处理file-loader所有的事情，但是遇到jpg格式的模块，会把该图片转换成base64格式字符串，并打包到js里。对⼩小体积的图片⽐比较合适，⼤大图片不合适。
module: { rules: [ { test: /\.(png|jpe?g|gif)$/, loader: "url-loader", options: { name: "[name]_[hash].[ext]", outputPath: "images/", //⼩小于2048，才转换成base64 limit: 2048 } } ] },
处理css
style-loader css-loader
css-loader 分析css模块之间的关系，并合成一个css；把css-loader⽣生成的内容，以style挂载到⻚页面的heade部分。
npm install style-loader css-loader -D
module: { rules: [ { test: /\.css$/, use: ["style-loader", "css-loader"] } ] },
sass-load
sass-load 把sass语法转换成css ，依赖node-sass模块
npm install sass-loader node-sass -D
module: { rules: [ { test: /\.scss$/, use: ["style-loader", "css-loader", "sass-loader"] } ] },
postcss-loader
样式⾃自动添加前缀
npm i -D postcss-loader
module: { rules: [ { test: /\.css$/, use: ["style-loader", "css-loader","postcss-loader"] } ] },
安装autoprefixer
npm i autoprefixer -D
新建postcss.config.js
module.exports = { plugins: [require("autoprefixer")] };
处理es6
babel-loader
babel-loader是webpack 与 babel的通信桥梁，不会做把es6转成es5的工作，这部分工作需要用到 @babel/preset-env来做；@babel/preset-env里包含了了es6转es5的转换规则。
npm i babel-loader @babel/core @babel/preset-env -D
通过上面的几步 还不够，Promise等一些还有转换过来，需要用@babel/plugin-transform-runtime，把es的新特 性都装进来，来弥补低版本浏览器器中缺失的特性
npm install --save-dev @babel/plugin-transform-runtime npm install --save @babel/runtime
module.exports = { module: { rules: [ { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader', options: { plugins: [ [ "@babel/plugin-transform-runtime", { "absoluteRuntime": false, "corejs": 2, "helpers": true, "regenerator": true, "useESModules": false } ] ] } } ] } }
如果觉着options的东西太多了，写这里不太合适，可以新建一个.babelrc文件。把options部分移⼊到该文件中。
//.babelrc { "plugins": [ [ "@babel/plugin-transform-runtime", { "absoluteRuntime": false, "corejs": 2, "helpers": true, "regenerator": true, "useESModules": false } ] ] } //webpack.config.js { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" }
配置React打包环境，安装babel与react转换的插件。
npm install --save-dev @babel/preset-react
在babelrc文件里添加:
//.babelrc { "plugins": [ [ "@babel/plugin-transform-runtime", { "absoluteRuntime": false, "corejs": 2, "helpers": true, "regenerator": true, "useESModules": false } ], "@babel/preset-react" ] }
plugins
plugin 是 wepback 的支柱功能。插件目的在于解决 loader无法实现的其他事，由于loader仅在每个文件的基础上执行转换，而插件(plugins) 常用于（但不限于）在打包模块的 “compilation” 和 “chunk” 生命周期执行操作和自定义功能。想要使用一个插件，你只需要 require() 它，然后把它添加到 plugins 数组中。
多数插件可以通过选项(option)自定义。
常用 plugins
HtmlWebpackPlugin
html-webpack-plugin会在打包结束后，自动⽣成一个html文件，并把打包生成的js模块引⼊到该html 中。
npm install --save-dev html-webpack-plugin
clean-webpack-plugin
清除打包生成的冗余重复文件
mini-css-extract-plugin
会在打包结束后，自动生成一个css文件，并把打包生成的css模块引⼊到html 中。
module.exports = { module: { rules: [ { test: /\.css$/, use: [ { loader: MiniCssExtractPlugin.loader },//用MiniCssExtractPlugin，这里就不是style-loade了 'css-loader', 'postcss-loader' ] } ... ] }, plugins: [ new CleanWebpackPlugin(), new HtmlWebpackPlugin({ title: '模板', template: './index.html' }), new MiniCssExtractPlugin({ filename: '[name].css' }), ], ... }
WebpackDevServer
提升开发效率的利器 每次改完代码都需要重新打包一次，打开浏览器，刷新一次，很麻烦 我们可以安装使用webpackdevserver来改善这块的体验。
npm install webpack-dev-server -D
module.exports = { ... devServer: { contentBase: "./dist", open: true, port: 8081 }, }
启动服务后，会发现dist⽬目录没有了了，这是因为devServer把打包后的模块不会放在dist⽬目录下，⽽是放 到内存中，从⽽提升速度。
开发期间，webpack可以配置proxy搞定跨域，上线后我们使用nginx转发。
module.exports = { ... devServer: { ... proxy: { '/api': { target: 'http://localhost:9092'//所有以/api开头的请求都转发到http://localhost:9092 } } }, }
Hot Module Replacement (HMR:热模块替换)
启动hmr
const webpack = require("webpack");
...
module.exports = {
...
plugins: [
new webpack.HotModuleReplacementPlugin()
],
devServer: {
...
hot:true,
hotOnly:true,//即便便HMR不⽣生效，浏览器器也不⾃自动刷新，就开启hotOnly
},
}
这样至少css变化会引起热更新，但是js不会，要想使js热更新，还需要使用module.hot.accept来观察模块更新 从⽽更新。
//index.js if (module.hot) { module.hot.accept("./xxx", function() { ... }); }
sourceMap
源代码与打包后的代码的映射关系，
开发环境推荐:devtool:"cheap-module-eval-source-map"线上环境可以不开启:如果要看到一些错误信息，推荐devtool:"cheap-module-source-map"
devtool参数说明：eval:速度最快
cheap:较快，不用管列的报错
module:第三方模块
cheap:较快，不用管列的报错
module:第三方模块
module.exports = { mode: 'development', devtool: "cheap-module-eval-source-map", }
webpack.config.js
const path = require('path') const HtmlWebpackPlugin = require('html-webpack-plugin'); const { CleanWebpackPlugin } = require('clean-webpack-plugin'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); module.exports = { entry: "./index.js", output: { // filename: 'pack.js', path: path.resolve(__dirname, './dist') }, module: { rules: [ { test: /\.(png|jpe?g|gif)$/, loader: "url-loader", options: { name: "[name]_[hash].[ext]", outputPath: "images/", //⼩小于2048，才转换成base64 limit: 2048 } }, { test: /\.css$/, use: [ { loader: MiniCssExtractPlugin.loader }, 'css-loader', 'postcss-loader' ] }, { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] }, { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader', options: { plugins: [ [ "@babel/plugin-transform-runtime", { "absoluteRuntime": false, "corejs": 2, "helpers": true, "regenerator": true, "useESModules": false } ] ] } } ] }, plugins: [ new CleanWebpackPlugin(), new HtmlWebpackPlugin({ title: '模板', template: './index.html' }), new MiniCssExtractPlugin({ filename: '[name].css' }), ], mode: 'development', devtool: "cheap-module-eval-source-map", devServer: { contentBase: "./dist", open: true, port: 8081, proxy: { '/api': { target: 'http://localhost:9092' } } }, }
