webpack.config.js-优快云博客

本文详细介绍了Webpack的基本配置方法，包括模块加载、热更新、文件压缩等关键功能，并通过具体示例展示了如何设置这些功能。

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

//定义了一些文件夹的路径
var ROOT_PATH = path.resolve(__dirname,'src');
// var APP_PATH = path.resolve(ROOT_PATH, 'app');
// var BUILD_PATH = path.resolve(ROOT_PATH, 'build');

module.exports = {
  entry: ROOT_PATH,
  output:{
    path: path.resolve(__dirname, 'assets'),
    filename: 'bundle.js',
    publicPath: '/assets/'
  },
  resolve: {
    extensions: ['.js', '.jsx' ],
  },
  devServer: {
    historyApiFallback: true,
    host: 'localhost',
    port: '9001',
    // hot: true,
    // inline: true,
    proxy: {
      '/nmedia': {
        target: 'http://localhost:8080',
        changeOrigin: true,
      }
    }
  },
  devtool: 'source-map',
  plugins: [
    new webpack.DefinePlugin({//指定生产环境，以便在压缩时可以让uglifyjs自动删除代码块的警告语句
     'process.env.NODE_ENV':JSON.stringify('production')
    }),
    new webpack.HotModuleReplacementPlugin(),
    new ExtractTextPlugin('css/styles.css'),
    // new webpack.optimize.UglifyJsPlugin({
    //   comments: false, //去掉注释
    //   compress: {
    //     warnings: false //忽略警告，不然会有一大推的黄色字体出现
    //   }
    // })
  ],
  module: {
    rules: [
      {
        test: /\.js$/,
        use: [{
          loader: "babel-loader",
          options: { presets: ["es2015", "stage-0"] }
        }],
        include: [path.resolve(__dirname, 'src')]
      },
      {
        test: /\.html$/,
        use: 'raw-loader'
      },
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: "style-loader",
          use: "css-loader"
        })
      },
      { test: /\.less$/, use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: [
            // activate source maps via loader query
            {
              loader: 'css-loader',
              options: { sourceMap: true, importLoaders: 1 }
            },
            {
              loader: 'less-loader',
              options: { sourceMap: true }
            }
          ]
        }
      )},
    ],
  }

}