webpack最新配置

// webpack.config.js

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

module.exports = {
  devtool: 'eval-source-map',//配置生成Source Maps,選擇合適的選項
  entry:  __dirname + "/src/main.js",//唯一入口文件
  output: {
    path: __dirname + "/public",//打包后的文件存放的地方
    filename: "[name]-[hash].js"http://打包后輸出文件的文件名
  },
  module: {//在配置文件里添加JSON loader
    loaders: [
      {
        test: /\.json$/,
        loader: "json"
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',//需要編寫.babelrc文件
      },
      {
        test: /\.css$/,
        loader: 'style!css?modules!postcss'//添加對疊層樣式表的處理
      }
    ]
  },
  plugins: [
    new webpack.LoaderOptionsPlugin({
      options: {
        postcss: function() {
          return [require('autoprefixer')]; 
        },
      }
    }),
    new HtmlWebpackPlugin({
      template: __dirname + "/index.tmpl.html"
    }),
    new webpack.optimize.UglifyJsPlugin(),
    new ExtractTextPlugin("[name]-[hash].css")
  ],
  devServer: {
    contentBase: "./public",//本地服務(wù)器所加載的頁面所在的目錄
    historyApiFallback: true,//不跳轉(zhuǎn)
    inline: true,//實時刷新
    hot: true
  },
}
// .babelrc
{
  "presets": ["es2015"]
}

啟動熱加載的正確姿勢:
$ webpack-dev-server --hot --inline --progress

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容