webpack结构梳理

Webpack

webpack官方中文文档戳这里

1. Webpack的基本结构:

   1. entry: 默认值是 ./src/index.js, 是用来告诉工具, 应该从那里进入.

      1. 单个文件入口:

         entry: './path/to/my/entry/file.js'
         

      2. 多个文件入口:

         entry: {
             pageOne: './src/pageOne/index.js',
             pageTwo: './src/pageTwo/index.js',
             pageThree: './src/pageThree/index.js'
           }
         

   2. output: 输出文件的默认值是 ./dist/main.js, 用来告诉工具, 打包好了的bundle放在哪里.

      1. 单个入口文件:

          output: {
             filename: 'bundle.js',
           }
         

      2. 多个入口文件:

         entry: {
             app: './src/app.js',
             search: './src/search.js'
           },
           output: {
             filename: '[name].js',
             path: __dirname + '/dist'
           }
         // 写入到硬盘：./dist/app.js, ./dist/search.js
         

   3. module

      1. loader: webpack只能处理js和json文件, 其他文件需要使用loader来帮忙处理.

         1. test: 用于标识出应该被对应的 loader 进行转换的某个或某些文件.
         2. use: 表示进行转换时，应该使用哪个 loader.

      2. 你可以使用 loader 告诉 webpack 加载 CSS 文件，或者将 TypeScript 转为 JavaScript。为此，首先安装相对应的 loader：

         // loader 的使用, 是从后往前的, 在后一个loader处理结束后, 返回给前一个. 
         module.exports = {
           module: {
             rules: [
               {
                 test: /\.css$/,
                 use: [
                   { loader: 'style-loader' },
                   {
                     loader: 'css-loader',
                     options: {
                       modules: true
                     }
                   },
                   { loader: 'sass-loader' }
                 ]
               }
             ]
           }
         };
         

   4. plugins: loader 用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。包括：打包优化，资源管理，注入环境变量

   5. mode: 通过选择 development, production 或 none 之中的一个，来设置 mode 参数，你可以启用 webpack 内置在相应环境下的优化。其默认值为 production

      1. 可能的值有：none, development 或 production（默认）。