webpack整理

1. webpack 只能理解 JavaScript 和 JSON 文件，这是 webpack 开箱可用的自带能力。loader 让 webpack 能够去处理其他类型的文件，并将它们转换为有效 模块，以供应用程序使用，以及被添加到依赖图中。

2. 在更高层面，在 webpack 的配置中，loader 有两个属性：test 属性，识别出哪些文件会被转换；use 属性，定义出在进行转换时，应该使用哪个 loader。

3. plugin是工具类来帮助项目更好的运行，比如打包优化，资源管理，注入环境变量

4. vender（第三方库）

5. webpack只能理解JavaScript和json

6. 模块热更替（hot module replacement）：

• 保留在完全重新加载页面期间丢失的应用程序状态 
• 只更新变更内容，节约开发时间
• 在源代码中修改js/css时，会立即在浏览器中更新，这相当于在devtools直接更改样式

loader

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          // [style-loader](/loaders/style-loader)
          { loader: 'style-loader' },
          // [css-loader](/loaders/css-loader)
          {
            loader: 'css-loader',
            options: {
              modules: true
            }
          },
          // [sass-loader](/loaders/sass-loader)
          { loader: 'sass-loader' }
        ]
      }
    ]
  }
}

特性：

• loader支持链式调用。链中的每一个loader会将转换应用在已处理的资源上。一组链式的loader将按照相反的顺序执行。第一个执行完的处理文件传递给下一个，直到最后一个loader。
• loader可以是同步的，也可以是异步的。
• loader可以运行在Node.js中，并且可以执行任意操作。
• loader可以通过options对象配置。
• plugin可以为loader带来更多特性。
• loader能够产生额外的任意文件。

Plugin
 

用法：plugin可以携带参数/选项，你必须在webpack配置中，向plugins属性中传入一个new实例配置方式：

const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通过 npm 安装
const webpack = require('webpack'); // 访问内置的插件
const path = require('path');

module.exports = {
  entry: './path/to/my/entry/file.js',
  output: {
    filename: 'my-first-webpack.bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        use: 'babel-loader',
      },
    ],
  },
  plugins: [
    new webpack.ProgressPlugin(),
    new HtmlWebpackPlugin({ template: './src/index.html' }),
  ],
};

output的path必须是绝对路径 

const path = require('path')
output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, './build') // 绝对路径
}

webpack手动指定配置文件：--config + 路径

loader可以对模块的源代码进行转换

module: {
    rules: [
        {
            test: '/\.css/$',
            use: [
                {
                    loader: 'css-loader',
                    options: string/object
                }
            ]
        }
    ]
}

style-loader: document.createElement(style)

postcss

插件列举

• postcss-preset-env：自动补全浏览器私有前缀
• precss：CSS 预处理（整合 Sass、LESS 或 Stylus 功能，语法基本和 Sass 的相同）
• postcss-import：通过 @import，整合多个 CSS 文件
• css-mqpacker：将相同的 CSS 媒体查询规则合并为一个
• cssnano：压缩 CSS 文件
• postcss-color-rgba-fallback：给 rgba 颜色创建降级方案(添加备用颜色)
• postcss-opacity：给 opacity 提供降级方案（给 IE 浏览器添加滤镜属性）
• node-pixrem：让 IE8 ⽀持 rem 单位
• postcss-pseudoelements：将伪元素的 :: 转换为 : ( IE8 不不⽀支持 ::）