这段时间准备自己写一个博客使用react，因此自然也接触到了很流行的打包工具webpack。写了一个简单的react和webpack的配置模版，如果觉得不错可以star一哈~
https://github.com/YingQQQ/webpack-react
一、WebPack的安装
Webpack常规的安装是通过npm。
Webpack的有些命令需要电脑安装才能使用，所以需要通过npm命名进行Webpack的全局安装：
$ npm install webpack -g
安装之后执行
webpack -v
二、webpack基本命令
$ webpack --config XXX.js //使用另一份配置文件（比如webpack.dev.config.js）来打包
$ webpack --watch //监听变动并自动打包
$ webpack -p//压缩混淆脚本
$ webpack -d//生成map映射文件，告知哪些模块的去向
$ webpack --progress //显示进度条
$ webpack --color //添加颜色
三、 webpack.config.js
一般来说都会有两个配置文件一个用于Dev，一个用于Build.但是他们有一些配置是公用的。因此我们就用 process.env.npm_lifecycle_event这个参数来辨别开发环境。
const path = require('path');
const webpack = require('webpack');
const merge = require('webpack-merge');//webpack合并工具。
const validate = require('webpack-validator')//webpack错误配置提示工具。
const CleanWebpackPlugin = require('clean-webpack-plugin');//build时删除原文件
const ExtractTextPlugin = require('extract-text-webpack-plugin');//提取样式插件
const HtmlWebpackPlugin = require('html-webpack-plugin');//自动生成html插件
const TARGET = process.env.npm_lifecycle_event;
const PATHS = {
app: path.resolve(__dirname, 'app'),
style: [
path.join(__dirname, 'app/style','Main.css'),
],
build: path.join(__dirname, 'build'),
test: path.join(__dirname, 'tests')
};;//文件入口配置
//Dev 和BUILD 共同配置
const common = merge(
{
entry: {
app: PATHS.app
},//入口文件配置
output: {
path: PATHS.build,
filename: '[name].js'
},//入口文件输出配置
resolve: {
extensions: ['', '.js', '.jsx']
}
},
module: {
preLoaders: [
{
test: /\.(js|jsx)$/,
loaders: ['eslint'],
include: PATHS.app
}
]//eslint检测代码错误
loaders: [
{
test: /\.(js|jsx)$/,
loaders: ['babel?cacheDirectory'],
query: {
'presets': ['es2015'],
'plugins': [
'transform-es3-property-literals',
'transform-es3-member-expression-literals'
]
}
}//设置允许编译ES6
]
}
plugins: [
new HtmlWebpackPlugin({
template: require('html-webpack-template'),
title: 'My App',//设置title的名字
inject: false,
appMountId: 'app',//设置标签的id
//filename: 'index.html',设置这个html的文件名,默认是index.html
// template:'header.html',要使用的模块的路径,例如jade,ejs
// inject: 'body',把模板注入到哪个标签后 'body'
// favicon:'./images/favico.ico',给html添加一个favicon './images/favico.ico'
// minify:true,是否压缩 true false
// hash:true,是否hash化 true false ,
// cache:false,是否缓存,
// showErrors:false,是否显示错误,
// xhtml:false 是否自动关闭标签 默认false
})
]
);
var config;
switch(TARGET) {
case 'build':
config = merge(
common,
{
devtool: 'source-map',
entry: {
style: PATHS.style
},//提供css文件入口
output: {
path: PATHS.build,
filename: '[name].[chunkhash].js',
chunkFilename: '[chunkhash].js'
}
},
module: {
loaders: [
//提取样式
{
test: /\.css$/,
loader: ExtractTextPlugin.extract('style', 'css'),
include: PATHS.style
}
]
},
plugins: [
new CleanWebpackPlugin(PATHS.build, {
root: process.cwd()
}),
new webpack.optimize.CommonsChunkPlugin({
// 与 entry 中的 vendors 对应
name: ['vendors', 'manifest'],
// 输出的公共资源名称
filename: 'common.bundle.js',
// 对所有entry实行这个规则
minChunks: Infinity
}),
// 把jquery作为全局变量插入到所有的代码中
// 然后就可以直接在页面中使用jQuery了
// new webpack.ProvidePlugin({
// $: 'jquery',
// jQuery: 'jquery',
// 'window.jQuery': 'jquery'
// }),例如想在js中用$，如果通过webpack加载，需要将$与jQuery对应起来,
//我这里不使用如有需要自行添加。
new webpack.DefinePlugin({
process.env.NODE_ENV:'production'
})，//设置build时的关键字，便于压缩文件。
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
})，//代码丑化
new ExtractTextPlugin('[name].[chunkhash].css')
]
);
break;
default:
config = merge(
common,
{
devtool: 'eval-source-map',
entry: {
style: PATHS.style
}
},
devServer: {
historyApiFallback: true,//查看历史url
contentBase: "./",//设定根目录。如果不进行设定的话，默认是在当前目录下。
quiet: false, //控制台中不输出打包的信息
noInfo: false,
hot: true, //开启热点
inline: true, //开启页面自动刷新
lazy: false, //不启动懒加载
progress: true, //显示打包的进度
watchOptions: {
aggregateTimeout: 300
},
port: '8088' //设置端口号
},//webpack-dev-server可以帮你启动一个服务器在Dev的时候
module: {
loaders: [
{
test: /\.css$/,
loaders: ['style', 'css'],
include: PATHS.style
}
]
}
);
}
module.exports = validate(config, {
quiet: true
});
简单的写了一写不要嫌弃~~
