关于Webpack配置

一. 定义entry(入口文件)和output(出口文件)
二. 定义module(加载器: js、file、picture、css)
三. 定义resolve(配置模块如何解析)
四. 定义plugins(三方插件，主要有HtmlWebpackPlugin生成html插件、
  ExtractTextPlugin提取样式插件、
  CommonsChunkPlugin提取引用的第三方文件插件、
  UglifyJsPlugin压缩插件、
  DefinePlugin配置当前生产环境[后三个是webpack自带的])

1. 定义entry(入口文件)和output(出口文件)
  入口文件: 对应的是项目的入口文件
    * 一个入口起点： entry['index': path.join(__dirname, './src/index.js')]
    * 多个入口起点: [分包必要]
    entry: { //根据当前项目配置作说明
        'index': [require.resolve('./polyfills'), paths.appIndexJs],
        'babel-polyfill': 'babel-polyfill',
        vendors: ['react', 'react-dom', 'react-redux', 'react-router', 'react-router-dom', 'redux', 'antd', 'antd-mobile']
    },

出口文件: [分包必要]
  output: {
      path: path.resolve(__dirname, './build'), //打包输出的路径
      publicPath: '../', // publicPath是打包的时候生成的文件链接（html文件）
      filename: 'js/[name].[chunkhash:8].js', //输出入口文件
      chunkFilename: 'js/[name].[chunkhash:8].js', //此选项决定了非入口chunk文件的名称
 },

2. 定义module(加载器) [分包必要]
  module.rules: 创建模块时，匹配请求的规则数组。这些规则能够修改模块的创建方式。这些规则能够对模块应用loader，或者修改解析器(parser)

module: {
    loaders: [   //loaders加载器
    {
        test: /\.js$/, //用正则匹配文件类型
        exclude: /node_modules|picker.min.js/, //排除特定条件
        loader: 'babel-loader', //使用loader解析选项 //加载器
        options: { //预设选项， 详细解释: 
            https://webpack.docschina.org/configuration/modeule/#useentry
            presets: ['es2015', 'react', 'stage-2']
        }
    },

    {
        test: /\.css$/,
        loader: ExtractTextPlugin.extract({ //三方插件
            fallback: 'style-loader', //编译过程中出现了错误，使用style-loader处理css
            use: ['css-loader'] //loader被用于将资源转换成一个CSS导出模块(默认使用css-loader编译css, “必填”)
        })
    },]
}

3. 定义resolve: 打包模块时，webpack使用resolve来解析文件路径 [分包必要]
  1). resolve帮助webpack找到bundle中需要引用的模块代码，这些代码包含在每个require/import语句中
  2). 文件路径分为: 绝对路径[import "/home/me/file"]相对路径[import "../home/file"]模块路径[import "module/lib/file"]
  3). 配置解释:
    模块将在resolve.modules中指定的所有目录内搜索。 你可以替换初始模块路径，此替换路径通过使用resolve.alias配置选项来创建一个别名。

    一旦根据上述规则解析路径后，解析器(resolver)将检查路径是否指向文件或目录。如果路径指向一个文件：
      * 如果路径具有文件扩展名，则被直接将文件打包。
      * 否则，将使用[resolve.extensions]选项作为文件扩展名来解析，此选项告诉解析器在解析中能够接受哪些扩展名(例如 .js, .jsx)。

    如果路径指向一个文件夹，则采取以下步骤找到具有正确扩展名的正确文件：
      * 如果文件夹中包含package.json文件，则按照顺序查找resolve.mainFields配置选项中指定的字段。并且package.json中的第一个这样的字段确定文件路径。
      * 如果 package.json 文件不存在或者package.json文件中的main字段没有返回一个有效路径，则按照顺序查找resolve.mainFiles配置选项中指定的文件名，看是否能在import/require 目录下匹配到一个存在的文件名。
      * 文件扩展名通过 resolve.extensions 选项采用类似的方法进行解析。

    webpack 根据构建目标(build target)为这些选项提供了合理的默认配置。

4. 定义plugins
主要做:
  * 生成html文件 [分包必要] //插件参数详情解释： https://segmentfault.com/a/1190000007294861
  new HtmlWebpackPlugin({ //生成html文件
      template: './index.html', //根据自己的指定的模板文件来生成特定的 html 文件
      inject: 'body',
      filename: 'js/index.html', //输出html文件的位置
  }),
  * 将所有css文件抽取到一个文件中 [分包必要]
  new ExtractTextPlugin("js/styles.css"),(注意: 抽取css文件，需要加载器配合，具体请看上边加载器)
  * 用CommonsChunkPlugin提取引用的第三方文件插件 [分包必要] //插件参数详情解释： https://segmentfault.com/q/1010000009070061
  * 压缩打包文件(防止打包后文件过大)[分包必要] //插件参数详情解释：https://segmentfault.com/a/1190000008995453
  * 配置当前生产环境 [分包必要]

5. 正是环境不需要生成source-map文件[devtool: 'eval-source-map']
  完整的分包案例请见: webpack.prod.conf.js
  webpack官网：https://webpack.docschina.org
猜你喜欢
