本文目录
一、基础
1 安装
npm i -g webpack webpack-cli
// 推荐安装至本地
npm i -D webpack webpack-cli2 webpck基础使用
2.1 webpack-cli
Npm 5.2以上的版本中提供了一个npx命令
npx想要解决的主要问题、就是调用项目内部安装的模块、即就是在node_modules下的.bin目录中找到对应的命令执行
使用webpack命令: npx webpack
Webpack4.0之后可以实现0配置打包构建、0配置的特点就是限制较多、无法自定义很多配置
开发过程中还是使用webpack配置进行打包构建
2.2 webpack配置
Webpack 四大核心概念
- 入口entry — 程序的入口js
- 输出 output — 打包后存放的位置
- 加载器loader — 用于对模块的源代码进行转换
- 插件plugins — 解决loader无法解决的问题
基本配置
- 配置 webpack.comfig.js
- 运行 npx webpack
// 运行默认webpack.config.js文件
npx webpack
npx webpack webpack.config.js
// 运行自定义配置文件
npx webpack --config webpack.custom.config.js
//package.json 配置
\"dev\": \"webpack --config webpack.custom.config.js\",
\"dev1\": \"npx webpack --config webpack.custom.config.js\", // npx 可省略、会自动在node_modules里面找
\"dev2\": \"webpack\"const path = require(\'path\')
module.exports = {
entry: \'./src/index.js\',
output: {
path: path.join(__dirname, \'dist\'),
filename:\'bundle.js\'
},
mode: \'development\'
}2.3 自动编译工具配置
每次要编译代码时，需要运行
npm run dev比较烦，webpack提供了几个选项、可以自动编译
- webpack watch mode
- webpack-dev-server
- webpack-dev-middleware
多数场景中、推荐使用
webpack-dev-server
2.3.1 watch
在
webpack指令后面加上--watch参数即可主要的作用就是监视本地项目文件的变化、发现有修改的代码就会自动编译打包、生成输出文件
- 通过cli的方式设置watch参数
-
配置
package.json\"watch\": \"webpack --watch\" -
运行
npm run watch
- 通过配置文件对watch的参数进行修改
const path = require(\'path\')
module.exports = {
mode: \'development\',
entry: \'./src/index.js\',
output: {
path: path.join(__dirname, \'dist\'),
filename:\'bundle.js\'
},
// 开启监视模式、此时执行webpack指令进行打包会监视文件变化自动打包
watch: true
}2.3.2webpack-dev-server (重点)
- 简单配置
-
安装devServer
安装devServer需要依赖webpack、必须在项目依赖中安装webpack
npm i -D webpack-dev-server
-
index.html中
<script src=\'/bundle.js\'></script> -
运行
npx webpack-dev-server -
运行
npx webpack-dev-server --hot --open --port 9527 -
配置package.json
\"dev\": \"webpack-dev-server --contentBase src --compress --hot --open --port 9527\" // --contentBase src 是以src为根目录， 否则以项目为根目录 // --open 自动打开 // --port 端口号 // --hot 热模块更新 // --compress 利用express开启gzip压缩 -
运行
npm run dev
devServer 会在内存中生成一个大包好的bundle.js， 专供开发时使用，打包效率高，修改代码后会自动打包重新打包以及刷新浏览器
- 修改webpack.config.js
const path = require(\'path\')
module.exports = {
mode: \'development\',
entry: \'./src/index.js\',
output: {
path: path.join(__dirname, \'dist\'),
filename:\'bundle.js\'
},
// 将cli中的参数 在配置文件中进行配置
devServer:{
hot:true,
open: true,
port:9527,
compress: true,
contentBase:\'./src\'
}
}2.3.3 html插件
-
安装 html-webpack-plugin 插件
npm i -D html-webpack-plugin -
在
webpack.config.js中 plugins 节点下配置const HtmlWebpackPlugin = require(\'html-webpack-plugin\') plugins:[ new HtmlWebpackplugin({ filename: \'index.html\', // 生产的文件名称 template: \'./src/index.html\' // 将此目录下的文件作为模板生成一个新的html、放置在根目录的内存中 }) ]- devServer时、根据模板在express项目根目录下生成html文件、类似于devServer生成内存中的bundle.js
- devServer时、自动引入 bundle.js
- 打包时会自动生成index.html
2.3.4 webpack-dev-middleware
webpack-dev-middleware 是一个容器(wrapper)、它可以把webpack处理后的文件传递给一个服务器(server)、webpack-dev-server 在内部使用了它、同时、它可以作为一个单独的包来使用、以便进行更多自定义设置来实现更多的需求
-
安装express 和 webpack-dev-middleware
npm i -D express webpack-dev-middleware -
新建 server.js
const express = require(\'express\') const webpack = require(\'webpack\') const webpackDevMiddleware = require(\'webpack-dev-middleware\') const config = require(\'./webpack.config\') const app = express() const compiler = webpack(config) app.use(webpackDevMiddleware(compiler, { publicPath:\'/\' })) app.listen(3333, function () { console.log(\'port:3333\'); })如果要使用middleware、必须使用html-webpack-plugin插件、否则html文件无法正确的输出到express服务器的根目录
2.3.5 总结
只有在开发时才需要使用自动编译工具
项目上线时都会直接使用webpack进行打包构建、不需要使用这些自动编译工具
自动编译工具只是为了提高开发体验
2.4处理CSS
-
安装 css-loader style-loader
npm i -D css-loader style-loader -
配置web pack
module:{ rules:[ // 配置的是用来解析.css文件的loader，css-loader、style-loader // css-loader -- 解析css文件 // style-loader -- 将解析出来的结果 放到html中 使其生效 { test:/\\.css$/, use:[\'style-loader\', \'css-loader\'] // webpack底层调用这些loader的顺序是从右向左 } ] }
2.5 处理less和scss
-
安装
npm i -D less less-loader sass-loader node-sass -
配置less
{ test:/\\.less$/, use:[\'style-loader\', \'css-loader\', \'less-loader\'] } -
配置sass
{ test:/\\.scss$/, use:[\'style-loader\', \'css-loader\', \'sass-loader\'] }
2.6处理图片和字体
-
下载、url-loader 封装了 file-loader
npm i -D file-loader url-loader -
配置
- 配置 filte-loader
{ // 处理图片 test: /\\.(png|jpg|gif)$/, use: \'file-loader\' }, { // 处理字体图标文件 test: /\\.(woff|woff2|eot|svg|ttf)$/, use: \'file-loader\' },- 配置url-loader
{ test:/\\.(png|jpg|gif)$/, use:{ loader: \'url-loader\', options: { // limit 表示若图片的大于5KB、就以路径的形式展示、小于的话就用base64格式展示 limit: 5 * 1024, outputPath:\'images\', // 图片生成的文件夹名称 name:\'[name]-[hash:6].[ext]\' // 生成的图片名称 } } //use 也可以写成数组 use:[{ loader:\'url-loader\', options:{ limit: 12 * 1024 } }] }
2.7 babel
-
安装
npm i -D babel-loader @babel/core @babel/preset-env -
如果需要支持更高级别的es6语法、可以继续安装插件、在官网找对应的插件安装
npm i -D @babel/plugin-proposal-class-properties -
配置
{ test: /\\.js$/, use: { loader: \'babel-loader\', options: { presets: [\'@babel/env\'], plugins: [\'@babel/plugin-proposal-class-properties\'] } }, exclude: /node_modules/, include: path.resolve(__dirname, \'../src\') }
官方更加建议使用 .babelrc 配置
{
\"presets\": [\"@babel/env\"],
\"plugins\": [\"@babel/plugin-proposal-class-properties\"]
}3.1 如果需要使用 genetator，无法直接使用 babel 进行转换，因为会将 generator 转换为一个 regeneratorRuntime， 然后使用 mark 和 wrap 来实现 generator
-
安装插件
npm i -D @babel/plugin-transform-runtime npm i -S @babel/runtime -
配置中、修改 plugins
plugins: [ \'@babel/plugin-proposal-class-properties\', \'@babel/plugin-transform-runtime\' ]
3.2 如果需要使用 ES6/7 中对象原型提供的新方法，babel 默认情况无法转换，即使用了 plugin-transform-runtime 的插件也不支持转换原型上的方法，需要使用 polyfill
-
安装
npm i -S @babel/polyfill -
在需要使用该模块的地方直接引入
import \'@babel/polyfill\'
2.8 插件
2.8.1 clean-webpack-plugin
该插件可以用于自动清除dist目录后重新生成，在 npm run build 的时候非常有用
-
安装插件
npm i -D clean-webpack-plugin -
引入插件
const {CleanWebpackPlugin} = require(\'clean-webpack-plugin\') -
配置插件
plugins:[ new HtmlWebpackPlugin({ filename: \'index.html\', template: \'./src/index.html\' }), new CleanWebpackPlugin() ],
2.8.2 copy-webpack-plugin
-
安装
npm i -D copy-webpack-plugin -
引入插件
const CopyPlugin = require(\'copy-webpack-plugin\'); -
配置插件
from:源、从哪里拷贝，可以是绝对路径或者绝对路径，推荐绝对路径
to:目标、拷贝到哪里去，相对于output的路径，同样可以是相对路径或者绝对路径，更推荐相对路径、直接相对于dist目录即可
plugins:[ new HtmlWebpackPlugin({ filename: \'index.html\', template: \'./src/index.html\' }), new CleanWebpackPlugin(), new CopyPlugin([ { from: path.join(__dirname, \'static\'), to: \'static\' } ]) ],
2.8.3 BannerPlugin
是一个webpack内置插件、用于给打包的js文件加上版权注释信息
-
引入webpack插件
const webpack = require(\'webpack\') -
配置
plugins:[ new HtmlWebpackPlugin({ filename: \'index.html\', template: \'./src/index.html\' }), new CleanWebpackPlugin(), new CopyPlugin([ { from: path.join(__dirname, \'static\'), to: \'static\' } ]), new webpack.BannerPlugin(\'王耀的版权信息\') ],
