WebPack (static module packaging tool for modern JavaScript applications)

concept

Essentially, webpack  is a static module packaging tool for modern JavaScript applications  . At the same time, webpack is also an excellent front-end construction tool, a static resource packager, which can perform static resource analysis based on module dependencies, and quickly package to generate static resources that can be directly identified by the corresponding browser!

Entry point: Indicate which module webpack should use as the start of building its internal  dependency graph  .

Output : Tell webpack where to output the bundles it creates and how to name these files.

File type reading (loader) : Only JavaScript and JSON files can be read, and loader can import import any type of module

Plugin : Loader is used to convert certain types of modules, and plug-in can be used to perform a wider range of tasks. Including: packaging optimization, resource management, injecting environment variables.

Environment mode (mode) : By selecting development, production or none one of, to set the mode parameters, you can enable webpack's built-in optimization in the corresponding environment. The default value is production

Browser compatibility: Load polyfill in advance , IE8 and below versions are not supported. webpack's import() and require.ensure() needs Promise

Environment: webpack 5 runs on Node.js v10.13.0+ version.

Process:

Install the webpack environment:

1) Project root directory console execution command: npm init, generate package.json file, npm is the package management tool that comes with the new version of node, and package.json is equivalent to a list, a file that records dependent libraries and project information.

2) Global installation webpack command: npm i webpack webpack-cli -g, global installation means that the command can be used under any project folder in the system environment. The first execution of mac computer should require administrator privileges, sudo npm i webpack webpack-cli -g If the internet speed is too slow, it is recommended to switch to Taobao mirror source.

3) Local installation webpcak command: sudo npm i webpack webpack-cli -D, the downloaded module is injected into the ./node_nodules folder under this project, it will not affect other projects and play an independent role!
 

Concept core:

Entry file

Entry file instructions, configure which entry file wepack uses for packaging analysis and other parameters.

module.exports = {
   entry: {   //入口
        suibian: './src/e.js',
        f: './src/f.js',
        myFile: './src/index.js'   //定义多个文件的路径
    },
}

 

Output. Export file

Export file instructions, configure the path and parameters of the output resource of the resource bundle packaged by webpack .

 output: {   //出口
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].[hash:8].js',  //模块标识符的 hash
    },

Plugins. Plugins

Plugins can allow webpack to perform a wider range of more complex tasks, configure packaging optimization and other related functions, and you need to introduce the corresponding plug-ins separately before use.

1）处理html文件插件：
// 无template属性时，默认在输出目录创建一个空的html文件，并将打包后的资源引入其中。template指明文件时，则复制文件，并引入打包后的资源。
new HtmlWebpackPlugin({
  template: "./src/index.html",
  minify: {
    collapseWhitespace: true, // 清除空行缩进
    removeAttributeQuotes: true, // 清除注释
  },
}),
2）抽离CSS成单独文件插件：
// 处理CSS从js文件中抽离生成独立文件
new MiniCssExtractPlugin({
   filename: "static/css/app.css", // 文件输出目录
 }),
3）压缩CSS插件：
// Css压缩插件，需要在package.json中定义sideEffects属性防止它压缩去除掉一些css，less等文件。
new OptimizeCssAssetsWebpackPlugin(),

4）PWA离线访问技术插件：
// PWA离线缓存技术，优化使用体验，网络断开后刷新网页仍能够加载得到已经缓存的资源文件，依靠service Workers技术，插件执行后生成一个servicework配置文件，需要在入口文件中注册，兼容性判断。
new WorkboxWebpackPlugin.GenerateSW({
  clientsClaim: true, // 帮助servicework快速启动
  skipWaiting: true, // 删除旧版本使用最新的serviceworker技术
}),
5）忽略库并动态引入第三方库插件：
/**
 * dll动态引入单独库
 * 通过manifest.json文件中的映射关系，构建打包时进行忽略打包哪些库，再通过addAssetHtmlWebpackPlugin引入独立打包的库。
 */
new webpack.DllReferencePlugin({
  manifest: resolve(__dirname, "dll/manifest.json"),
}),
new addAssetHtmlWebpackPlugin({
  filepath: resolve(__dirname, "dll/jquery.js"),
}),

Mode. Development environment configuration

Configure the working mode of webpack. There are development and production modes. The development environment is simple to configure, so that the code can run locally. The production mode is complicated and needs to deal with operations such as optimization when the website is running and online.

// mode: "development",
mode: "production", // set the working environment of webpack