webpack

• devtool
• 入口起点 (entry)
• 输出 (output)
• 模式 (mode)
• loader
• 插件 (plugins)
• 构建目标 (target)
• 模块热替换

webpack.config.js配置文件大致如下：

const path = require('path');
module.exports = {
 devtool: 'eval-source-map',
 entry: __dirname + "/app/main.js", //已多次提及的唯一入口文件
 output: {
   path: path.resolve(__dirname, 'public'), //打包后的文件存放的地方
   filename: "bundle.js" //打包后输出文件的文件名
 },
 module: {
   rules: []
 },
 plugins: []
}

参数解读：

devtool 选项控制是否生成，以及如何生成 source map

devtool: 'source-map',
 //source-map(生产环境) cheap-module-source-map（生产环境）
//eval-source-map(开发环境使用) cheap-module-eval-source-map(开发环境使用)

entry

表示webpack编译的入口文件，通常由html通过script标签引入

loader

loader用于对模块的源代码进行转换
通过使用不同的loader，webpack有能力调用外部的脚本或工具，实现对不同格式的文件的处理，比如说分析转换scss为css，或者把下一代的JS文件（ES6，ES7)转换为现代浏览器兼容的JS文件，对React的开发而言，合适的Loaders可以把React的中用到的JSX文件转换为JS文件.

Loaders需要单独安装并且需要在webpack.config.js中的modules关键字下进行配置

---

loader配置转换scss为css,并自动添加浏览器前缀

sudo cnpm install --save-dev style-loader css-loader sass-loader postcss-loader autoprefixer

转换scss为css，并自动添加浏览器前缀

1.配置module里rules的选项

  module: {
    rules: [
      {
        // 处理html文件，并处理img 中 src 和 data-src 的引入路径
        test: /\.html$/,
        loader: "html-loader?attrs=img:src img:data-src"
      },
      {
        test: /\.(sass|scss)$/,
        use: [
          {
            'loader':'style-loader'
          }, 
          {
            'loader': 'css-loader'
          },
          {
            loader: 'postcss-loader',
            options: {
              sourceMap: true,
              config: {
                path: 'postcss.config.js' // 这个得在项目根目录创建此文件
              }
            }
          }, 
          {
            'loader': 'sass-loader'
          },
        ]
      }
    ]
  }

2. 创建postcss.config.js文件，内容如下：

module.exports = {
  plugins: [
    require('autoprefixer'),
    require('postcss-nested')
  ]
}

3. 在package.json文件中添加 browserslist

"browserslist": [
    "defaults",
    "not ie < 11",
    "last 2 versions",
    "> 1%",
    "iOS 7",
    "last 3 iOS versions"
  ]

---

loader配置编译图片

sudo cnpm install --save-dev url-loader file-loader

往loaders模块的rules里添加：

{
   test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
   loader: 'url-loader?limit=1&name=src/images/[name].[ext]'
}

---

loader配置编译 js

cnpm install --save-dev babel-loader babel-core babel-preset-es2015

往loaders模块的rules里添加：

{
    test: /\.js$/,
    loader: 'babel-loader',
    query: {
       presets: ['es2015']
    }
}

新建 .babelrc文件，内容如下：

{
    "presets": ["es2015"],
    "comments": false
}

---

plugins用于解决loader无法实现的其他事
由于插件可以携带参数，必须在 webpack 配置中，向 plugins 属性传入 new 实例。

1.通过cnpm/npm安装好插件
2.在 webpack 配置中，向 plugins 属性传入 new 实例。
列：

cnpm install --save-dev  html-webpack-plugin

webpack.config.js文件添加：

var HtmlWebpackPlugin = require('html-webpack-plugin');

在 webpack 配置中，向 plugins 属性传入 new 实例：

plugins: [
    new HtmlWebpackPlugin({ 
        filename: "index.html", // 生成的模板文件的名字 默认index.html
        template: "index.html", // 模板来源文件
    })
  ]

---

多页面练习demo可查看：https://coding.net/u/wanghongli/p/webpack-practice