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

posted @ 2017-05-15 22:25  凉月-天  阅读(1164)  评论(0编辑  收藏  举报