webpack学习笔记（持续性更新）

这阵子在项目开发中，用到一些webpack的配置，之前做过的很多项目的基本配置都是在已经配置好的基础上进行开发，自己也只是偶尔会修改一些webpack配置项，但是并不熟悉。最近在做项目的时候觉得还是有必要完整的看下webpack的用法。于是乎在网上找了点资料自己看看。顺便在这里做下笔记，方便自己以后查找。(间歇性更新，不知道会不会断更，哈哈哈哈~)

电子书原文: 深入浅出webpack

安装webpack：在项目根目录里 npm install webpack --save-dev
npm install --save-dev
在项目package.json里添加以下代码，则运行npm run start时会使用项目下的webpack配置，即webpack.config.js里的配置
“scripts”: {
“start”: “webpack --config webpack.config.js”
}

根目录下新建webpack.config.js

一切文件：JavaScript、CSS、SCSS、图片、模板，在 Webpack 眼中都是一个个模块，这样的好处是能清晰的描述出各个模块之间的依赖关系，以方便 Webpack 对模块进行组合和打包。 经过 Webpack 的处理，最终会输出浏览器能使用的静态资源。

const path = require('path');
module.exports = {
 // 所有模块的入口，Webpack 从入口开始递归解析出所有依赖的模块
  entry: './main.js',
  output: {
    // 把所有依赖的模块合并输出到一个 bundle.js 文件
    filename: 'bundle.js',
    // 输出文件都放到 dist 目录下
    path: path.resolve(__dirname, './dist'),
  }
};

Webpack 不原生支持解析 CSS 文件,需要添加loader

module: {
    rules: [
      {
        // 用正则去匹配要用该 loader 转换的 CSS 文件
        test: /\.css$/,
        use: ['style-loader', 'css-loader?minimize'],
      }
    ]
  }

加入loader后大概就长这样

Loader 可以看作具有文件转换功能的翻译员，配置里的 module.rules 数组配置了一组规则，告诉 Webpack 在遇到哪些文件时使用哪些 Loader 去加载和转换。 如上配置告诉 Webpack 在遇到以 .css 结尾的文件时先使用 css-loader 读取 CSS 文件，再交给 style-loader 把 CSS 内容注入到 JavaScript 里。 在配置 Loader 时需要注意的是：

• use 属性的值需要是一个由 Loader 名称组成的数组，Loader 的执行顺序是由后到前的
• 每一个 Loader 都可以通过 URL querystring 的方式传入参数，例如 css-loader?minimize 中的 minimize 告诉 css-loader 要开启 CSS 压缩。
  加入后loader后直接运行npm run start 会报错，
  缺少模块style-loader，用npm安装一下。
  因为我的webpack版本是4.42.1。原书里有些代码不兼容，需要改一下。
  首先，webpack4里取消了loader里的"minimize"选项，故上面我们这一步需要删除这个选项。即：
  因为上面我知道minimize这个选项是开启压缩css,没了这个选项之后css怎么压缩我还不清楚。有待进一步思考。
  还有一个警告：
  
  需要配置mode选项。
  有两种方法，
  1、直接在weback.config.js里写死配置。
  2、在执行参数里写。
  这里写得比较详细，https://www.cnblogs.com/leinov/p/10039173.html
  配置后，可以通过process.env.NODE_ENV来获取当前是开发环境还是生产环境
  
  晚上12点多了，明天再看吧，今天先做这些笔记先————2020.04.10 0:17