配置 React 項目，需要完成的工作：
1、編譯 jsx,es6,scss 等資源
2、自動引入靜態資源到 html 頁面
3、實時編譯和刷新瀏覽器
4、按指定模塊化規范自動包裝模塊
5、自動給 css 添加瀏覽器內核前綴
6、按需打包合并 js、css
根據 webpack 文檔編寫最基本的 webpack 配置，直接使用 node api 的方式
/* webpack.config.js */
varwebpack= require('webpack');
//輔助函數?varutils= require('./utils');
varfullPath=utils.fullPath;
varpickFiles=utils.pickFiles;
//項目根路徑?varROOT_PATH=fullPath('../');
//項目源碼路徑?varSRC_PATH=ROOT_PATH+'/src';
//產出路徑?varDIST_PATH=ROOT_PATH+'/dist';
//是否是開發環境?var__DEV__= process.env.NODE_ENV!=='production';
// conf
varalias=pickFiles({
id:/(conf\/[^\/]+).js$/,
pattern:SRC_PATH+'/conf/*.js'
});
// components
alias= Object.assign(alias,pickFiles({
id:/(components\/[^\/]+)/,
pattern:SRC_PATH+'/components/*/index.js'
}));
// reducers
alias= Object.assign(alias,pickFiles({
id:/(reducers\/[^\/]+).js/,
pattern:SRC_PATH+'/js/reducers/*'
}));
// actions
alias= Object.assign(alias,pickFiles({
id:/(actions\/[^\/]+).js/,
pattern:SRC_PATH+'/js/actions/*'
}));
varconfig= {
context:SRC_PATH,
entry: {
app: ['./pages/app.js']
},
output: {
path:DIST_PATH,
filename:'js/bundle.js'
},
module: {},
resolve: {
alias:alias
},
plugins: [
newwebpack.DefinePlugin({
// http://stackoverflow.com/questions/30030031/passing-environment-dependent-variables-in-webpack
"process.env.NODE_ENV":JSON.stringify(process.env.NODE_ENV||'development')
})
]
};
module.
exports=config;
/* webpack.dev.js */
varwebpack= require('webpack');
varWebpackDevServer= require('webpack-dev-server');
varconfig= require('./webpack.config');
varutils= require('./utils');
varPORT=8080;
varHOST=utils.getIP();
varargs= process.argv;
varhot=args.indexOf('--hot') > -1;
vardeploy=args.indexOf('--deploy') > -1;
//本地環境靜態資源路徑?varlocalPublicPath='http://'+HOST+':'+PORT+'/';
config.output.publicPath=localPublicPath;
config.entry.app.unshift('webpack-dev-server/client?'+localPublicPath);
newWebpackDevServer(webpack(config), {
hot:hot,
inline:true,
compress:true,
stats: {
chunks:false,
children:false,
colors:true
},
// Set this as true if you want to access dev server from arbitrary url.
// This is handy if you are using a html5 router.
historyApiFallback:true,
}).listen(
PORT,HOST,function() {
console.log(localPublicPath);
});
編譯 jsx、es6、scss 等資源：
● 使用 bael 和 babel-loader 編譯 jsx、es6
● 安裝插件: babel-preset-es2015 用于解析 es6
● 安裝插件：babel-preset-react 用于解析 jsx
// 首先需要安裝 babel
$ npm i babel-core
// 安裝插件
$ npm i babel-preset-es2015babel-preset-react
// 安裝 loader
$ npm i babel-loader
在項目根目錄創建 .babelrc 文件:
{
"presets": ["es2015","react"]
}
在 webpack.config.js 里添加：
//使用緩存varCACHE_PATH= ROOT_PATH +'/cache';
// loaders
config.module.loaders= [];
//使用babel編譯jsx、es6
config.module.loaders.push({
test:/\.js$/,
exclude:/node_modules/,
include: SRC_PATH,
//這里使用?loaders，因為后面還需要添加?loader
loaders: ['babel?cacheDirectory='+CACHE_PATH]
});
接下來使用 sass-loader 編譯 sass:
$ npm i sass-loader node-sasscss-loader style-loader
●css-loader 用于將 css 當做模塊一樣來 import
●style-loader 用于自動將 css 添加到頁面
在 webpack.config.js 里添加：
//編譯?sass
config.module.loaders.push({
test:/\.(scss|css)$/,
loaders: ['style','css','sass']
});
自動引入靜態資源到相應 html 頁面
● 使用 html-webpack-plugin
$ npm i html-webpack-plugin
在 webpack.config.js 里添加：
// html?頁面?varHtmlwebpackPlugin= require('html-webpack-plugin');
config.
plugins.push(
newHtmlwebpackPlugin({
filename:'index.html',
chunks: ['app'],
template: SRC_PATH +'/pages/app.html'
})
);
打包合并 js、css
webpack 默認將所有模塊都打包成一個 bundle，并提供了 Code Splitting 功能便于我們按需拆分。在這個例子里我們把框架和庫都拆分出來：
在 webpack.config.js 添加：
config.entry.lib= [
'react','react-dom','react-router',
'redux','react-redux','redux-thunk'
]
config.output.filename='js/[name].js';
config.
plugins.push(
newwebpack.optimize.CommonsChunkPlugin('lib','js/lib.js')
);
//別忘了將?lib?添加到?html?頁面
// chunks: ['app', 'lib']
