webpack使用详解

叁歲伎倆 2023-03-01 09:10 12阅读 0赞

##### 基本命令 #####

npm init -y  
npm install webpack webpack-cli --save-dev  
执行 npx webpack，会将我们的脚本作为入口起点 src/index.js，然后 输出 为 main.js  
loader系统中baber 转译ES6  
npx webpack 打包构建  
npx webpack --config webpack.config.js 构建

##### 目录结构 #####

##### 配置文件 #####

webpack.config.json  
比CLI的功能 配置文件具有更多的灵活性。我们可以通过配置方式指定 loader 规则(loader rules)、插件(plugins)、解析选项(resolve options)，以及许多其他增强功能

const path = require('path');
    
      module.exports = { 
        entry: './src/index.js',
        output: { 
          filename: 'bundle.js',
          path: path.resolve(__dirname, 'dist')
        },
    	module: { 
             rules: [
               { 
                 test: /\.css$/,
                 use: [
                   'style-loader',
                   'css-loader'
                 ]
               }
             ]
           }
      };

##### 脚本启动 #####

考虑到用 CLI 这种方式来运行本地的 webpack 不是特别方便，我们可以设置一个快捷方式。在 package.json 添加一个 npm 脚本  
通过向 npm run build 命令和你的参数之间添加两个中横线，可以将自定义参数传递给 webpack，例如：npm run build – --colors。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzMTgzMzU4MTgxNDA_size_16_color_FFFFFF_t_70]

### 资源管理 ###

grunt 和 gulp 等工具来处理资源，并将它们从 /src 文件夹移动到 /dist 或 /build 目录中。

##### 加载 CSS #####

为了从 JavaScript 模块中 import 一个 CSS 文件，你需要在 module 配置中 安装并添加 style-loader 和 css-loader：

##### 加载图片 #####

假想，现在我们正在下载 CSS，但是我们的背景和图标这些图片，要如何处理呢？使用 file-loader，我们可以轻松地将这些内容混合到 CSS 中：

##### 加载字体 #####

那么，像字体这样的其他资源如何处理呢？file-loader 和 url-loader 可以接收并加载任何文件，然后将其输出到构建目录。

##### 加载数据 #####

此外，可以加载的有用资源还有数据，如 JSON 文件，CSV、TSV 和 XML。类似于 NodeJS，JSON 支持实际上是内置的，也就是说 import Data from ‘./data.json’ 默认将正常运行。要导入 CSV、TSV 和 XML，你可以使用 csv-loader 和 xml-loader。  
在使用 d3 等工具来实现某些数据可视化时，预加载数据会非常有用。我们可以不用再发送 ajax 请求，然后于运行时解析数据，而是在构建过程中将其提前载入并打包到模块中，以便浏览器加载模块后，可以立即从模块中解析数据。

### 管理输出 ###

并且一旦开始对文件名使用哈希(hash)\]并输出多个 bundle，手动地对 index.html 文件进行管理，一切就会变得困难起来。

##### HtmlWebpackPlugin #####

html-webpack-plugin  
创建了一个全新的文件，所有的 bundle 会自动添加到 html 中。  
如果我们更改了我们的一个入口起点的名称，甚至添加了一个新的名称，会发生什么？生成的包将被重命名在一个构建中，但是我们的index.html文件仍然会引用旧的名字。我们用 HtmlWebpackPlugin 来解决这个问题。

##### 清理 /dist 文件夹 #####

clean-webpack-plugin  
每次构建前清理 /dist 文件夹  
注意

const { CleanWebpackPlugin} = require('clean-webpack-plugin');	//
    
     plugins: [
            new CleanWebpackPlugin(),
            new HtmlWebpackPlugin({ 
            title: 'Output Management'
          })
        ],

### 开发 ###

##### source map #####

为了更容易地追踪错误和警告，JavaScript 提供了 source map 功能，将编译后的代码映射回原始源代码。如果一个错误来自于 b.js，source map 就会明确的告诉你。

##### 开发工具 #####

每次要编译代码时，手动运行 npm run build 就会变得很麻烦。

webpack 中有几个不同的选项，可以帮助你在代码发生变化后自动编译代码：

1.  webpack’s Watch Mode  
    观察模式  
    如果其中一个文件被更新，代码将被重新编译，所以你不必手动运行整个构建。
2.  webpack-dev-server  
    –save-dev webpack-dev-server  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzMTgzMzU4MTgxNDA_size_16_color_FFFFFF_t_70 1]
3.  webpack-dev-middleware  
    –save-dev express webpack-dev-middleware  
    中间件(middleware)  
    webpack-dev-middleware 是一个容器(wrapper)，它可以把 webpack 处理后的文件传递给一个服务器(server)。 webpack-dev-server 在内部使用了它，同时，它也可以作为一个单独的包来使用，以便进行更多自定义设置来实现更多的需求。接下来是一个 webpack-dev-middleware 配合 express server 的示例。

首先，安装 express 和 webpack-dev-middleware：

### 模块热替换 ###

模块热替换(Hot Module Replacement 或 HMR)是 webpack 提供的最有用的功能之一。它允许在运行时更新各种模块，而无需进行完全刷新。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzMTgzMzU4MTgxNDA_size_16_color_FFFFFF_t_70]: /images/20230209/7867ea32a08b49d5852dcacd7e86501a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzMTgzMzU4MTgxNDA_size_16_color_FFFFFF_t_70 1]: /images/20230209/88b509ae3ff641af9711f3b7f629fda3.png