webpack配置

还记得学vue的时候，自己动手配置过一个简单的webpack,实现了css-loader，style-loader,热部署等，之后因为一直用vue-cli都很少去看webpack的配置，只有项目需要配置的时候会去查资料配置webpack。所有一直觉得没有很具体的深入webpack。这次抽了个时间用webpack从无到有搭了项目脚手架。废话少说，一起来看一下。

脚手架最终模样

webpack主要就4个概念

entry，output，loader，plugin.

在这里主要用到了
loader:
babel-loader,css-loader,style-loader,postcss-loader,autoprefixer。
plugin:
html-webpack-plugin，HotModuleReplacementPlugin(热加载插件),extract-text-webpack-plugin，uglifyjs-webpack-plugin，clean-webpack-plugin,OccurrenceOrderPlugin。
其他：
devServer,devtool(sourceMap)。
下面是具体代码：

webpack.config.js

const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
  
  entry: __dirname + "/app/main.js",//已多次提及的唯一入口文件
  output: {
    path: __dirname + "/build",//打包后的文件存放的地方
    filename: "bundle.js"//打包后输出文件的文件名
  },
  devtool: 'eval-sourec-map',
  devServer: {
    contentBase: "./public",//本地服务器所加载的页面所在的目录
    historyApiFallback: true,//不跳转
    inline: true,//实时刷新,
    hot: true,
  },
  module: {
    rules: [
      {
        test:/(\.jsx|\.js)$/,
        use: {
          loader: "babel-loader",
   
        },
        exclude: /node_modules/
      },
      {
        test: /\.css$/,
        use:[
          {
            loader:"style-loader"
          },
          {
            loader:"css-loader",
            // 每次配置完webpack.config.js都要重启服务器
            options: {
              modules:true, // 指定启用css modules
              loaclIdentName: '[name]__[loacl}__[hash:base64:5]'// 指定css的类名格式
            }
          },
          {
            loader:"postcss-loader"
          }
        ]
      }
    ]
  },
  plugins: [
    new webpack.BannerPlugin('版权所有，翻版必究'),
    new HtmlWebpackPlugin({
      template: __dirname + "/app/index.tmpl.html"
    }),
    new webpack.HotModuleReplacementPlugin()//热加载插件
  ],
};

.babelrc

{
  "presets": ["react","env"],
  "env": {
    "development":{
      "plugins":[["react-transform",{
        "transforms":[{
          "transform": "react-transform-hmr",
          "imports":["react"],
          "locals":["module"]
        }]
      }]]
    }
  }
}

postcss.config.js

module.exports = {
  plugins: [
    require('autoprefixer')
  ]
}

webpack.production.config.js

//npm install --save-dev uglifyjs-webpack-plugin
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
const CleanWepackPlugin = require("clean-webpack-plugin")

module.exports = {
  
  entry: __dirname + "/app/main.js",//已多次提及的唯一入口文件
  output: {
    path: __dirname + "/build",//打包后的文件存放的地方
    filename: "bundle-[hash].js"//打包后输出文件的文件名
  },
  devtool: 'null',//注意修改了这里，这能大大压缩我们的打包代码
  devServer: {
    contentBase: "./public",//本地服务器所加载的页面所在的目录
    historyApiFallback: true,//不跳转
    inline: true,//实时刷新,
    hot: true,
  },
  module: {
    rules: [
      {
        test:/(\.jsx|\.js)$/,
        use: {
          loader: "babel-loader",
        },
        exclude: /node_modules/
      },
      {
        test: /\.css$/,
        use:ExtractTextPlugin.extract({
          fallback: "style-loader",
          use:[
            {
            loader:"css-loader",
            options:{
              modules: true,
              loaclIdentName: '[name]__[loacl}__[hash:base64:5]'// 指定css的类名格式
            }
            },
            {
              loader:"postcss-loader"
            }
        ]
        })
      }
    ]
  },
  plugins: [
    new webpack.BannerPlugin('版权所有，翻版必究'),
    new HtmlWebpackPlugin({
      template: __dirname + "/app/index.tmpl.html"
    }),
    new webpack.HotModuleReplacementPlugin(),//热加载插件
    new webpack.optimize.OccurrenceOrderPlugin(),
    // new webpack.optimize.UglifyJsPlugin(),
    new ExtractTextPlugin("style.css"),
    new CleanWepackPlugin("build/*.*",{
      root: __dirname,
      verbose:true,
      dry:false
    })
  ],

  optimization: {
    minimizer: [
    new UglifyJsPlugin({
      uglifyOptions: {
      compress: false
      }
    })
  ]
},
};

package.json

{
  "name": "webpack-sample-project",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack",
    "server": "webpack-dev-server --open",
    "build": "set NODE_ENV=production&&webpack --config ./webpack.production.config.js --progress"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "autoprefixer": "^9.0.0",
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-plugin-react-transform": "^3.0.0",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "clean-webpack-plugin": "^0.1.19",
    "css-loader": "^1.0.0",
    "extract-text-webpack-plugin": "^4.0.0-beta.0",
    "html-webpack-plugin": "^3.2.0",
    "postcss-loader": "^2.1.6",
    "react-transform-hmr": "^1.0.4",
    "style-loader": "^0.21.0",
    "uglifyjs-webpack-plugin": "^1.2.7",
    "webpack": "^4.16.1",
    "webpack-cli": "^3.1.0",
    "webpack-dev-server": "^3.1.4"
  },
  "dependencies": {
    "react": "^16.4.1",
    "react-dom": "^16.4.1"
  }
}

最后代码上传到了github，有兴趣可以看一下。
webpack脚手架