3.26_webpack.md

webpack

• webpack配置文件放在那里都可以，因为你要配置运行命令，在运行命令里要告知这个配置文件的目录，使用config告知配置文件的目录

webpack --config=config/webpack.prod.js

• 为了提高效率和降低成本，即提高开发过程中的开发效率，减少不必要的重复工作时间
• webpackMerge，一个api，合并配置文件用的
• 在服务端渲染中，我写了俩个配置文件，分别用来打包客户端代码和服务端代码

entry output

• 出口入口

entry: './src/client/index.jsx',
output: {
  filename: 'index.js',
  path: path.resolve(__dirname, 'public')
},

mode

• development、production、none
• 就是启用响应模式下内置的webpack优化，比如在production环境下，就开启了treeShaking

loader

• webpack自身只能理解JS，使用loader可以将所有类型的文件转化为webpack能够处理的模块，比如把css打包导js文件中

本质上，webpack loader将所有类型的文件，转换为应用程序的依赖图，可以直接引用的模块

rules: [
    {
        test: /\.css$/,
        use: [
            'style-loader',
            {
                loader: 'css-loader',
                options: {
                    modules: true
                }
            }
        ]
    }
]

plugin

• 插件目的在于解决 loader 无法实现的其他事。
• plugin是一个具有apply属性的Javascript对象，这个对象可以在整个编译生命中期中被 webpack compier访问

plugins: [
  new webpack.optimize.UglifyJsPlugin(),
  new HtmlWebpackPlugin({template: './src/index.html'})
]

module

• 和平时说的是一个概念，通过import、require引入的一个个具有独立功能的代码块就叫做模块
• 在里面配置loader来让webpack识别其他类型的文件，jsx,css，sass之类的
• rules就是规则的集合:test匹配文件类型，use值使用什么loader,excule表示不编译的文件集合，一般不会编译node_module中的文件

module: {
  rules: [
    {
      test: /(.js|.jsx)$/,
      use: ['babel-loader'],
      exclude: /node_modules/
    }
  ]
}