写一份简单的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文件了
//                                      }
//                              }
                        }
                }
        }
}