webpack 配置

package.json

	"devDependencies": {
		"babel-core": "^6.26.0",
		"babel-loader": "^7.1.2",
		"babel-preset-es2015": "^6.24.1",
		"css-loader": "^0.28.7",
		"extract-text-webpack-plugin": "^3.0.2",
		"file-loader": "^1.1.5",
		"html-webpack-plugin": "^2.30.1",
		"node-sass": "^4.5.3",
		"optimize-css-assets-webpack-plugin": "^3.2.0",
		"pug": "^2.0.0-rc.4",
		"pug-loader": "^2.3.0",
		"sass-loader": "^6.0.6",
		"style-loader": "^0.19.0",
		"url-loader": "^0.6.2",
		"webpack": "^3.8.1",
		"webpack-dev-server": "^2.9.3",
		"webpack-merge": "^4.1.0"
	}

webpack.base.conf.js

const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
	entry: __dirname + '/src/js/main.js', // 唯一入口文件

	// 输出目录
	output: {
		path: path.join(__dirname, '/dist'), //打包后的文件存放的地方
		filename: 'static/js/[name].[hash].js', //打包后输出文件的文件名
		publicPath: '/', // 输出的公共资源文件
	},

	// 相关的loader
	module: {
		rules: [
			{
				test: /\.js$/,
				// 编译js 转换es6/7 为es5
				// 排除	node_modules
				loader: 'babel-loader',
				exclude: /node_modules/,
			},
			{
				test: /\.pug$/,
				// pug 加载器
				loader: 'pug-loader',
			},
			{
				test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
				// 图片加载器 配置图片到img文件夹中
				// 其中 8KB以下的图片转成base64
				loader: 'url-loader?limit=8192&name=img/[name].[hash:7].[ext]',
			},
			{
				test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
				// 字体加载 处理文件
				loader: 'file-loader?name=fonts/[name].[ext]',
			},
		],
	},
}

webpack.dev.conf.js

/*
 * 开发环境的配置
 * @Author: 56 
 * @Date: 2017-10-27 10:42:11 
 * @Last Modified by: 56
 * @Last Modified time: 2017-10-27 11:51:37
 */
const webpack = require('webpack')
const merge = require('webpack-merge')
const baseWebpackConfig = require('./webpack.base.conf')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = merge(baseWebpackConfig, {
	devtool: 'cheap-module-eval-source-map', // 开发过程中加入到js中的 sourcemap 编译速度最快

	// 使用的 loader 加载器
	module: {
		rules: [
			{
				test: /\.css$/,
				// 配置css的抽取器、加载器。
				loader: 'style-loader!css-loader',
			},
			{
				test: /(\.sass|\.scss)$/,
				// 配置sass的抽取器 加载器
				// 从右向左提取 !可表示右边输出做左边输入
				loader: 'style-loader!css-loader!sass-loader',
			},
		],
	},

	// 插件配置
	plugins: [
		new webpack.HotModuleReplacementPlugin(), // 热加载
		new HtmlWebpackPlugin({
			filename: 'index.html', // 输出的html名
			template: 'index.pug', // 指定的html模板
		}),
	],

	// 开发服务器
	devServer: {
		// contentBase: './', // 本地服务器所加载的页面所在的目录
		port: 8080, // 端口号
		historyApiFallback: true, // 不跳转
		inline: true, // 实时刷新
		// hot: true, // 开启热更新
		// proxy: {}, // 做路径映射
	},
})

webpack.prod.conf.js

/*
 * 生产环境配置
 * @Author: 56 
 * @Date: 2017-10-27 10:44:17 
 * @Last Modified by: 56
 * @Last Modified time: 2017-10-27 11:45:09
 */
const webpack = require('webpack')
const merge = require('webpack-merge')
const baseWebpackConfig = require('./webpack.base.conf')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')

module.exports = merge(baseWebpackConfig, {
	// 输出配置
	devtool: 'source-map', // 生成单独 sourcemap

	// 使用的 loader 加载器
	module: {
		rules: [
			{
				test: /\.css$/,
				// 配置css的抽取器、加载器。
				loader: ExtractTextPlugin.extract('style-loader', 'css-loader'),
			},
			{
				test: /(\.sass|\.scss)$/,
				// 配置sass的抽取器 加载器
				// 从右向左提取 !可表示右边输出做左边输入
				loader: ExtractTextPlugin.extract('css-loader!sass-loader'),
			},
		],
	},

	// 插件配置
	plugins: [
		new webpack.BannerPlugin('56的代码'),
		new webpack.optimize.OccurrenceOrderPlugin(), // 为组件分配ID
		new ExtractTextPlugin('static/css/[name].[contenthash].css'), // 给每个css 单独生成对应的路径
		new OptimizeCSSPlugin({ cssProcessorOptions: { safe: true } }), // css 代码压缩
		new webpack.optimize.UglifyJsPlugin({ extract: true }), // js代码压缩
		new HtmlWebpackPlugin({
			filename: 'index.html', // 输出的html名
			template: 'index.pug', // 指定的html模板
			inject: true,
			minify: {
				removeComments: true, // 移除注释
				collapseWhitespace: true, // 删除空白
				removeAttributeQuotes: true, // 删除属性引号
			},
		}), // 生成html
	],
})