webpack4.0 入门实践教程

mkdir webpack-dev && cd webpack-dev
npm init -y
npm i webpack webpack-cli -D

 "scripts": {
 "build": "webpack --mode production"
 }

module.exports = {
 entry: '', // 打包入口：指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始
 output: '', // 出口
 resolve: {}, // 配置解析：配置别名、extensions 自动解析确定的扩展等等
 devServer: {}, // 开发服务器：run dev/start 的配置，如端口、proxy等
 module: {}, // 模块配置：配置loader（处理非 JavaScript 文件，比如 less、sass、jsx、图片等等）等
 plugins: [] // 插件的配置：打包优化、资源管理和注入环境变量
}

const path = require('path')

module.exports = {
 // 指定打包入口
 entry: './src/index.js',

 // 打包出口
 output: {
 path: path.resolve(__dirname, 'dist'), // 解析路径为 ./dist
 filename: 'bundle.js'
 }
}

npm install html-webpack-plugin -D

const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
 //...
 plugins: [
 new HtmlWebpackPlugin({
 filename: 'index.html', // 配置输出文件名和路径
 template: './public/index.html' // 配置要被编译的html文件
 })
 ]
}

const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
 //...
 plugins: [
 new HtmlWebpackPlugin({
 filename: 'index.html', // 配置输出文件名和路径
 template: './public/index.html', // 配置要被编译的html文件
 hash: true,
 // 压缩 => production 模式使用
 minify: {
 removeAttributeQuotes: true, //删除双引号
 collapseWhitespace: true //折叠 html 为一行
 }
 })
 ]
}

npm install style-loader css-loader -D

module.exports = {
 //...
 module: {
 /**
 * test: 匹配特定条件。一般是提供一个正则表达式或正则表达式的数组
 * include: 匹配特定条件。一般是提供一个字符串或者字符串数组
 * exclude: 排除特定条件
 * and: 必须匹配数组中的所有条件
 * or: 匹配数组中任何一个条件,
 * nor: 必须排除这个条件
 */
 rules: [
 {
 test: /\.css$/,
 include: [path.resolve(__dirname, 'src')],
 use: ['style-loader', 'css-loader']
 }
 ]
 }
 //...
}

npm i mini-css-extract-plugin postcss-loader autoprefixer -D

const MiniCssExtractPlugin = require('mini-css-extract-plugin')

module.exports = {
 // ...
 module: {
 rules: [
 {
 test: /\.css$/,
 include: [path.resolve(__dirname, 'src')],
 use: [
 MiniCssExtractPlugin.loader,
 'css-loader',
 {
 loader: 'postcss-loader',
 options: {
 plugins: [require('autoprefixer')]
 }
 }
 ]
 }
 ]
 },
 plugins: [
 //...
 new MiniCssExtractPlugin({
 filename: '[name].css',
 chunkFilename: '[id].css'
 })
 ]
}

npm install less less-loader -D

const MiniCssExtractPlugin = require('mini-css-extract-plugin')

module.exports = {
 module: {
 rules: [
 // ...
 {
 test: /\.less$/,
 use: [
 MiniCssExtractPlugin.loader,
 'css-loader',
 {
 loader: 'postcss-loader',
 options: {
 plugins: [require('autoprefixer')] // 添加css中的浏览器前缀
 }
 },
 'less-loader'
 ]
 }
 ]
 }
 //...
}

npm install file-loader url-loader -D

module.exports = {
 module: {
 rules: [
 // ...
 {
 test: /\.(png|jpg|gif)$/,
 use: [
 {
 loader: 'url-loader',
 options: {
 outputPath: 'images/', //输出到images文件夹
 limit: 500 //是把小于500B的文件打成Base64的格式，写入JS
 }
 }
 ]
 }
 ]
 }
 //...
}

npm i babel-loader @babel/core @babel/preset-env -D

{
 "babel-loader": "^8.0.4",
 "@babel/core": "^7.1.2",
 "@babel/preset-env": "^7.1.0"
}

{
 "presets": [
 [
 "@babel/preset-env",
 {
 "modules": false,
 "targets": {
 "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
 },
 "useBuiltIns": "usage"
 }
 ]
 ]
}

module.exports = {
 module: {
 rules: [
 //...
 {
 test: /\.m"htmlcode">

npm i @babel/plugin-transform-runtime -D
npm i @babel/runtime -S


修改 .babelrc


{
 //...
 "plugins": ["@babel/plugin-transform-runtime"]
}


打包前清理源目录文件 clean-webpack-plugin
每次打包，都会生成项目的静态资源，随着某些文件的增删，我们的 dist 目录下可能产生一些不再使用的静态资源，webpack 并不会自动判断哪些是需要的资源，为了不让这些旧文件也部署到生产环境上占用空间，所以在 webpack 打包前最好能清理 dist 目录。


npm install clean-webpack-plugin -D


修改 webpack.config.js 文件


const CleanWebpackPlugin = require('clean-webpack-plugin')
module.exports = {
 plugins: [new CleanWebpackPlugin(['dist'])]
}


提取公用代码
假如你 a.js 和 b.js 都 import 了 c.js 文件，这段代码就冗杂了。为什么要提取公共代码，简单来说，就是减少代码冗余，提高加载速度。


module.exports = {
 //...
 optimization: {
 splitChunks: {
 cacheGroups: {
 commons: {
 // 抽离自己写的公共代码
 chunks: 'initial',
 name: 'common', // 打包后的文件名，任意命名
 minChunks: 2, //最小引用2次
 minSize: 0 // 只要超出0字节就生成一个新包
 },
 styles: {
 name: 'styles', // 抽离公用样式
 test: /\.css$/,
 chunks: 'all',
 minChunks: 2,
 enforce: true
 },
 vendor: {
 // 抽离第三方插件
 test: /node_modules/, // 指定是node_modules下的第三方包
 chunks: 'initial',
 name: 'vendor', // 打包后的文件名，任意命名
 // 设置优先级，防止和自定义的公共代码提取时被覆盖，不进行打包
 priority: 10
 }
 }
 }
 }
}


hash
hash 是干嘛用的？ 我们每次打包出来的结果可能都是同一个文件，那我上线的时候是不是要替换掉上线的 js，那我怎么知道哪是最新的呢，我们一般会清一下缓存。而 hash 就是为了解决这个问题而存在的
我们此时在改一些 webpack.config.js 的配置


module.exports = {
 //...
 output: {
 path: path.resolve(__dirname, 'dist'),
 filename: '[name].[hash:8].js'
 },
 //...
 plugins: [
 new MiniCssExtractPlugin({
 filename: '[name].[hash:8].css',
 chunkFilename: '[id].[hash:8].css'
 })
 ]
}


减少 resolve 的解析，配置别名
如果我们可以精简 resolve 配置，让 webpack 在查询模块路径时尽可能快速地定位到需要的模块，不做额外的查询工作，那么 webpack 的构建速度也会快一些


module.exports = {
 resolve: {
 /**
 * alias: 别名的配置
 *
 * extensions: 自动解析确定的扩展,
 * 比如 import 'xxx/theme.css' 可以在extensions 中添加 '.css'， 引入方式则为 import 'xxx/theme'
 * @default ['.wasm', '.mjs', '.js', '.json']
 *
 * modules 告诉 webpack 解析模块时应该搜索的目录
 * 如果你想要添加一个目录到模块搜索目录，此目录优先于 node_modules/ 搜索
 * 这样配置在某种程度上可以简化模块的查找，提升构建速度 @default node_modules 优先
 */
 alias: {
 '@': path.resolve(__dirname, 'src'),
 tool$: path.resolve(__dirname, 'src/utils/tool.js') // 给定对象的键后的末尾添加 $，以表示精准匹配
 },
 extensions: ['.wasm', '.mjs', '.js', '.json', '.jsx'],
 modules: [path.resolve(__dirname, 'src'), 'node_modules']
 }
}


webpack-dev-serve
上面讲到了都是如何打包文件，但是开发中我们需要一个本地服务，这时我们可以使用 webpack-dev-server 在本地开启一个简单的静态服务来进行开发。
webpack-dev-server 是 webpack 官方提供的一个工具，可以基于当前的 webpack 构建配置快速启动一个静态服务。当 mode 为 development 时，会具备 hot reload 的功能，即当源码文件变化时，会即时更新当前页面，以便你看到最新的效果。...


npm install webpack-dev-server -D


package.json 中 scripts 中添加


"start": "webpack-dev-server --mode development"


默认开启一个本地服务的窗口 http://localhost:8080/ 便于开发
配置开发服务器
我们可以对 webpack-dev-server 做针对性的配置


module.exports = {
 // 配置开发服务器
 devServer: {
 port: 1234,
 open: true, // 自动打开浏览器
 compress: true // 服务器压缩
 //... proxy、hot
 }
}



  
contentBase: 服务器访问的根目录（可用于访问静态资源）
  
port: 端口
  
open: 自动打开浏览器

 模块热替换(hot module replacement)
模块热替换( HMR - Hot Module Replacement )功能会在应用程序运行过程中替换、添加或删除模块，而无需重新加载整个页面。主要是通过以下几种方式，来显著加快开发速度：

  
保留在完全重新加载页面时丢失的应用程序状态。
  
只更新变更内容，以节省宝贵的开发时间。
  
调整样式更加快速 - 几乎相当于在浏览器调试器中更改样式。

上面我们 npm start 后修改一次文件，页面就会刷新一次。这样就存在很大问题了，比如我们使用 redux , vuex 等插件，页面一刷新那么存放在 redux , vuex 中的东西就会丢失，非常不利于我们的开发。
HMR 配合 webpack-dev-server ，首先我们配置下 webpack.config.js


const webpack = require('webpack')

module.exports = {
 devServer: {
 //...
 hot: true
 },
 plugins: [
 new webpack.HotModuleReplacementPlugin()
 //...
 ]
}


配置后还不行，因为 webpack 还不知道你要更新哪里, 修改 src/index.js 文件, 添加


if (module.hot) {
 module.hot.accept()
}


重启服务， npm start 之后，修改引入 index.js 文件后，页面就不会重新刷新了，这便实现了 HMR
但是但是有个问题是，你修改 css/less 等样式文件并未发生改变， what "htmlcode">

module.exports = {
 module: {
 rules: [
 {
 test: /\.less$/,
 use: [
 // MiniCssExtractPlugin.loader,
 'style-loader',
 'css-loader',
 {
 loader: 'postcss-loader',
 options: {
 plugins: [require('autoprefixer')] // 添加css中的浏览器前缀
 }
 },
 'less-loader'
 ]
 }
 ]
 }
}


这样我们修改 less 文件就会发现 HMR 已经实现了。
其实，我们可以发现，dev 下配置的 loader 为 style-loader , 而生产环境下则是需要 MiniCssExtractPlugin.loader
这就涉及到了不同环境之间的配置。可以通过 process.env.NODE_ENV 获取当前是开发环境或者是生产环境，然后配置不同的 loader，这里就不做展开了。下一篇文章打算在做一个 react-cli 或者 vue-cli 的配置，将开发环境的配置与生产环境的配置分开为不同的文件。
结语
前面讲到的知识都是 webpack 的一些基础的知识，更多的资料可以查询webpack 中文官网，官网讲的比较详细，我这里也是讲最常的配置，也是一篇入门系列的文章，文中涉及的知识点还有很多地方还需要完善，譬如 优化 webpack 的构建速度， 减小打包的体积等等。
学习 webpack 4.0 还需要多实践，多瞎搞，笔者也是刚刚学习 webpack 的配置，不对之处请各位指出。
下一篇文章打算从零配置一个脚手架，以加深自己对 webpack 的理解。
本文产生的代码： webpack-dev
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。