這段時間準備自己寫一個博客使用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
});
簡單的寫了一寫不要嫌棄~~
