写一份简单的webpack2 的配置文件，无比简单

这是一份自己用到的webpack2的配置写法，从看webpack2开始，发现自己越来越懒了，现在html文件都不想自己写了，直接自己生成。。。
哈哈，这次是可以无比完美的导入css啦
开发的时候在命令行输入

webpack-dev-server --inline --hot

在上线时使用

webpack -p

-p 的意思的顺便压缩代码。。。

var webpack = require("webpack");
var path = require("path");
var extractTextPlugin = require('extract-text-webpack-plugin'); // 把css从js中独立抽离出来
var HtmlWebpackPlugin = require('html-webpack-plugin'); // 生成html文件并且自动引用js
module.exports = {
    context: __dirname + "/app/js",
    entry: {
        index: "./index.js",
    },
    devtool: "source-map",
    output: {
        // path: path.resolve(__dirname, "bundle/js");
        path: __dirname + "/bundle/js",
        filename: "[name].js"
    },
    module: {
        rules: [
            {
                test: /\.js|\.jsx/,
                exclude: /node_modules/,
                use: [{
                    loader: "babel-loader",
                    options: {
                        presets: ["es2015", "react"]
                    }
                }]
            },
            {
                test: /\.css$/,
                use: [
                    {
                        loader: "style-loader",
                        options: {
                            // modules: true // 设置css模块化,详情参考https://github.com/css-modules/css-modules
                        }
                    },
                    {
                        loader: "css-loader",
                        options: {
                            // modules: true // 设置css模块化,详情参考https://github.com/css-modules/css-modules
                        }
                    },
                    // {
                    //  loader: "postcss-loader", // 添加浏览器前缀
                    //  options: {
                    //      plugins: function () {
                    //          return [
                    //              require('autoprefixer')
                    //          ]
                    //      }
                    //  }
                    // }
                ]
            }
        ]
    },
    plugins: [
//      new webpack.optimize.CommonsChunkPlugin('common'), // 默认会把所有入口节点的公共代码提取出来,生成一个common.js
        // new ExtractTextPlugin("[name].css"), // 抽取css
        // https://segmentfault.com/a/1190000007294861#articleHeader9
//      new HtmlWebpackPlugin({ // 自动生成index.html文件
//          filename: __dirname+'/bundle/index.html',  // 生成的文件名
//          template:__dirname+'/app/index.html', // 文件模板
//          inject:'body', // script标签位于html文件的 body 底部
//          hash:true,
//          chunks:[__dirname+'/bundle/index.js']   // chunks 选项的作用主要是针对多入口(entry)文件。当你有多个入口文件的时候，对应就会生成多个编译后的 js 文件。那么 chunks 选项就可以决定是否都使用这些生成的 js 文件。chunks 默认会在生成的 html 文件中引用所有的 js 文件，当然你也可以指定引入哪些特定的文件。
//         }),
        new HtmlWebpackPlugin({
            title: '试题录入',
            template:__dirname+'/app/index.html', // 文件模板
            filename: __dirname + '/bundle/index.html',  // 生成的文件名
        }),
//      new HtmlWebpackPlugin({
//          title: '试题查询',
//          template:__dirname+'/app/search.html', // 文件模板
//          filename: __dirname + '/bundle/search.html',  // 生成的文件名
//      })
    ],
    devServer: {
        contentBase: __dirname,
        host: '0.0.0.0', // 大家都这么写。。。我也就这么写，如果地址栏写localhost的话就可以，但是使用ip地址的话就不可以
        port: 5005, // 启动的端口
        inline: true,// 使用内联方式进行热替换
        historyApiFallback: true, // 这个貌似没有起到什么作用。。。。。
        hot: true, // 开启热更新
        proxy: {
            '/pop_web/*': {
                target: 'http://0.0.0.0:8080',
                secure: false,
                changeOrigin: true, // 跨域
//              pathRewrite: {'^/pop_web' : ''}, // 替换url请求中的字段，比如此处是把pop_web字段重置为空
//              bypass: function(req, res, proxyOptions) { // 这个是解决当我的是单页面时，我想转发所有的请求，但是却不转发当前的html文件，我尝试写一个html
文件，但是失败了，貌似不识别，官方文档也没有说如果想要略过2个html文件该怎么写。。。
//                  if (req.headers.accept.indexOf('html') !== -1) {
//                     console.log('Skipping proxy for browser request.');
//                     return  "app/search.html" ; // 这里就是略过的html文件了
//                  }
//              }
            }
        }
    }
}

转载于:https://www.cnblogs.com/daowangzhizhu-pt/p/6858805.html