webpack 3.10.0 + React

页面结构

安装

npm init -y
npm install --save-dev ...

环境

"scripts": {
    "build": "webpack",
    "watch": "webpack --watch",
    "dev": "webpack-dev-server",
    "test": "echo \"Error: no test specified\" && exit 1"
},
"devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.4",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "clean-webpack-plugin": "^0.1.19",
    "css-loader": "^0.28.11",
    "extract-text-webpack-plugin": "^3.0.2",
    "file-loader": "^1.1.11",
    "html-webpack-plugin": "^3.2.0",
    "node-sass": "^4.9.0",
    "postcss-loader": "^2.1.5",
    "react": "^16.4.0",
    "react-dom": "^16.4.0",
    "sass-loader": "^7.0.3",
    "style-loader": "^0.21.0",
    "webpack": "^3.10.0",
    "webpack-dev-server": "^2.10.0"
}

webpack配置

const HtmlWebpackPlugin = require("html-webpack-plugin");
const CleanWebpackPlugin = require("clean-webpack-plugin");
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const path = require("path");

module.exports = {
  entry: {
    //指定入口文件，程序从这里开始编译,__dirname当前所在目录, ../表示上一级目录, ./同级目录
    app: path.resolve(__dirname, "./src/main.js")
  },
  output: {
    path: path.resolve(__dirname, "./dist"), // 输出的路径
    filename: "[name].js" // 打包后文件
  },
  devtool: "inline-source-map",
  devServer: {
    contentBase: "./dist",
    port: "8081"
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["es2015", "react"]
          }
        },
        exclude: /node_modules/
      },
      {
        test: /\.(scss|css)$/,
        use: ExtractTextPlugin.extract({
          use: [
            {
              loader: "css-loader",
              options: {
                sourceMap: true
              }
            },
            {
              loader: "postcss-loader" //css兼容前缀
            },
            {
              loader: "sass-loader"
            }
          ]
        })
      },
      {
        test: /\.(jpg|png|gif)$/,
        use: "file-loader"
      }
    ]
  },
  plugins: [
    // new CleanWebpackPlugin(["dist"]),
    new ExtractTextPlugin({
      filename: "[name].css",
      disable: false,
      allChunks: true
    }),
    new HtmlWebpackPlugin({
      template: "./src/index.html"
    })
  ],
  watchOptions: {
    poll: 1000, //监测修改的时间(ms)
    // aggregeateTimeout: 1000, //防止重复按键，500毫米内算按键一次
    ignored: /node_modules|dist/ //不监测
  }
};