webpack.config.js

Posted 陆漫漫

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了webpack.config.js相关的知识,希望对你有一定的参考价值。

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 }
            }
          ]
        }
      )},
    ],
  }

}

 

以上是关于webpack.config.js的主要内容,如果未能解决你的问题,请参考以下文章

webpack教程——webpack.config.js文件

在 vue-cli 3.0 如何生成完整的 webpack.config.js

webpack配置之webpack.config.js文件配置

入口点 - webpack.config.js vs vue.config.js

如何指定 webpack-dev-server webpack.config.js 文件位置

Webpack 2 未解析 webpack.config.js 中的入口点