webpack基础知识整理

webpack 俗称“模块打包机”。 本身只用于js模块，对其他静态资源无法处理。 但是通过loader，可以引入任何其他类型的文件。
了解更多内容，请点击👉webpack中文官方文档

-安装

1，检查node版本，是否是最新版

控制台输入 node --version 获取node版本号

2，安装webpack

控制台输入

npm init -y 初始化 生成package.json文件

npm install --save-dev webpack本地安装最新版本

3，webpack 4+版本，继续本地安装CLI（一个可以让webpack在node中运行的工具）

npm install --save-dev webpack-cli

*或者把2和3 打包安装 npm install webpack webpack-cli --save-dev

4，安装lodash依赖 用来执行必要的js代码

npm install --save lodash

5，npx webpack执行

6，webpack.config.js 文件是用来取代使用 CLI 选项方式的配置文件 。执行webpack时，node默认去找这个文件。

7，添加适合的loader

比如css的 npm install --save-dev style-loader css-loader

css-loader是执行文件 处理css文件的

style-loader是挂载文件 把处理后的样式 以style的形式，加载到标签中

然后在webpack.config.js文件添加module配置。

例如：

module: {
        rules: [
            {
                test: /\.css$/,
                //正则表达式，表示所有以.css结尾的文件
                
                use: [
                    'style-loader',
                    'css-loader'
                ]
            }
        ]
    }
//在这种情况下，以 .css 结尾的全部文件，都将被提供给 style-loader 和 css-loader。

在index.js里引入css文件

8， 如果变更入口名，会在dist里重新生成一个新的bondle.js文件。与原来的bondle.js名字虽然不一样，但是内容是重复的。 html-webpack-plugin 来解决这个问题。

安装 npm install --save-dev html-webpack-plugin

在webpack.config.js文件中引入 const HtmlWebpackPlugin = require('html-webpack-plugin')

生成的新的index.html 替换掉老的index.html。也就是说，在重新执行后的index.html,是一个新的html文件，所有的 bundle 会自动添加到 html 中。

9，清理dist文件夹，把项目中不用的文件都清理掉

安装 npm install clean-webpack-plugin --save-dev

引入 const {CleanWebpackPlugin} = require('clean-webpack-plugin')

在plugins里配置： new CleanWebpackPlugin()

如果不想清除陈旧资源，就做如下配置：

new CleanWebpackPlugin({ cleanStaleWebpackAssets: false })

10，在源代码中显示错误，即打包的文件有错误，怎么在源码中显示出来，方便调试

在webpack.config.js文件的module.exports中配置开发工具

devtool: 'inline-source-map'

11，观察模式 作用是 不必每次都手动执行 npm run build 。 只要修改代码，webpack会自动编译模块。

//三种不同选项
选项1，webpack's Watch Mode
//在package.json中配置 "watch": "webpack --watch"
//执行命令 npm run watch
//缺点是，每次修改代码后，都需要刷新浏览器，才能看到新的效果

选项2，webpack-dev-server //常用
//提供了一个简单的服务器 http://localhost:8080/ 能够实时加载，不需要手动刷新浏览器，自动运行
//安装 npm install --save-dev webpack-dev-server
//在webpack.config.js文件里配置：
/*devServer: {
        contentBase: './dist'
    },*/
//告知 webpack-dev-server，在 localhost:8080 下建立服务，将 dist 目录下的文件，作为可访问文件。
//在package.json中配置 "start": "webpack-dev-server --open",
//运行 npm start
//打开浏览器 进入http://localhost:8080/服务器
//缺点是 会删掉dist里的index.html陈旧文件

选项3，webpack-dev-middleware
//这个是在服务器localhost:3000 端口运行的

12，模块热替换HMR

所谓热替换，就是实现模块自动实时更新，改变后的新模块替换掉旧的模块。

作用： 观察模式下，会修改代码会刷新整个浏览器页面，而使用模块热替换之后，浏览器不需要进行完全刷新，只需要在运行时更新相应的模块即可。效率更高。

HMR 不适用于生产环境，这意味着它应当只在开发环境使用

webpack-dev-server 的观察模式下启用HMR：

在webpack.config.js中引入包，const webpack = require('webpack')

entry中删掉print.js，改变入口文件， app: ‘./src/index.js’

在devServer中配置，hot: true

在plugins中创建实例，new webpack.NamedModulesPlugin(), new webpack.HotModuleReplacementPlugin()

做完以上，还不足以实现页面单个模块的实时自动刷新。 还需要在index.js中移除旧元素，添加新元素。让每次变更的模块都自动添加到页面中，就可以实现自动实时刷新了。

13，HMR修改样式表

借助于style-loader，实现css 的模块热替换。

安装两个loader：npm install --save-dev style-loader css-loader

更新webpack.config.js文件中的配置。配置一个module，内容和第7条一样。

在src中创建一个styles.css文件 文件中写好样式

在index.js中 import引入该文件

npm start开启观察模式后， 修改styles.css中的样式，可以看到浏览器中显示的样式在实时自动更新。

14，tree shaking （摇晃 树） 哈哈哈 就是这么个字面意思

官方解释： 你可以将应用程序想象成一棵树。绿色表示实际用到的源码和 library，是树上活的树叶。灰色表示无用的代码，是秋天树上枯萎的树叶。为了除去死去的树叶，你必须摇动这棵树，使它们落下。

作用：描述移除 JavaScript 上下文中的未引用代码(dead-code)

用法：

在index.js中引入 import

在package.json中配置副作用属性"sideEffects"

(解释：副作用就是有用处，不能删除。 无副作用，就是毛用没有，需要删除)

情况1：如果引入文件中所有代码都不包含副作用，那就配置"sideEffects": false

情况2： 如果有些文件是有作用的，那就把这些文件路径添加到"sideEffects"的数组值中。``

"sideEffects": [
    "./src/math.js",
    "*.css"
  ],

然后在webpack.config.js中配置mode: "production"。进行压缩输出。

最后 npm run build

15，生产环境构建

开发环境提供了 强大的、具有实时重新加载(live reloading)或热模块替换(hot module replacement)能力的 source map 和 localhost server。

生产环境提供了 更小的 bundle，更轻量的 source map，以及更优化的资源，以改善加载时间。

也就是把webpack.config.js文件分解。删除webpack.config.js文件。

做一个通用文件webpack.common.js，一个开发文件webpack.dev.js，一个生产文件webpack.prod.js。

目标： 一个通用文件，提供给开发环境和生产环境 ，把需要通用的模块、入口、出口、插件等放在这个文件里。

一个开发文件，写关于开发的代码。

一个生产文件，写关于生产的代码。

首先做一个通用配置：webpack-merge 作用是 不必在环境特定(environment-specific)的配置中重复代码

安装webpack-merge：

npm install --save-dev webpack-merge

在 package.json文件中，修改启动开发和生产的脚本：

"start": "webpack-dev-server --open --config webpack.dev.js",

npm start 定义为开发环境脚本。

"build": "webpack --config webpack.prod.js"

将 npm run build 定义为生产环境脚本

在生产环境中启用source map：

在webpack.prod.js文件中修改配置：devtool: 'source-map',

new UglifyJSPlugin({
         sourceMap: true
     }),

指定环境： 在webpack.prod.js文件中配置插件：

首先引入： const webpack = require('webpack')

然后配置插件：

new webpack.DefinePlugin({
       'process.env.NODE_ENV': JSON.stringify('production')
     })

16， 代码分离

有三种常用的代码分离方法：

• 入口起点：使用 entry 配置手动地分离代码。
• 防止重复：使用 CommonsChunkPlugin 去重和分离 chunk。

预告：
正常来说，下一篇应该是某个框架的知识梳理点，但是react我也是刚撸完官方文档，应用方面还不够熟练，无法形成系统的知识脉络。 容我再摸索摸索，积累到一定的应用经验，再发基础知识整理。