標簽（空格分隔）:工具
webpack特點
- 豐富的插件
- 大量的加載器
- 代碼分割,提供按需加載的能力
- 發(fā)布工具
webpack的優(yōu)勢
- 以commonJS形式書寫腳本,對AMD/CMD的支持也很全面
- 能被模塊化的不僅僅是JS
- 打包,壓縮,混淆,圖片轉(zhuǎn)base64
- 擴展性強,插件完善,支持熱插拔.
webpack的安裝
1.全局安裝命令
$ npm install webpack -g
2.使用webpack
$ npm init # 會自動生成一個package.json文件
$ npm install webpack --save-dev #將webpack增加到package.json文件中
3.安裝開發(fā)的工具
$ npm install webpack-dev-server --save-dev
webpack的配置
webpack的配置文件為webpack.config.js
例子:
var webpack = require('webpack');
var commonsPlugin = new webpack.optimize.CommonsChunkPlugin('common.js');
module.exports = {
//插件項
plugins: [commonsPlugin],
//頁面入口文件配置
entry: {
index : './src/js/page/index.js'
},
//入口文件輸出配置
output: {
path: 'dist/js/page',
filename: '[name].js'
},
module: {
//加載器配置
loaders: [
{ test: /\.css$/, loader: 'style-loader!css-loader' },
{ test: /\.js$/, loader: 'jsx-loader?harmony' },
{ test: /\.scss$/, loader: 'style!css!sass?sourceMap'},
{ test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'}
]
},
//其它解決方案配置
resolve: {
root: 'E:/github/flux-example/src', //絕對路徑
extensions: ['', '.js', '.json', '.scss'],
alias: {
AppStore : 'js/stores/AppStores.js',
ActionType : 'js/actions/ActionType.js',
AppAction : 'js/actions/AppAction.js'
}
}
};
- plugins 是插件項，這里我們使用了一個 CommonsChunkPlugin的插件，它用于提取多個入口文件的公共腳本部分，然后生成一個 common.js 來方便多頁面之間進行復用。
- entry 是頁面入口文件配置，output 是對應輸出項配置 （即入口文件最終要生成什么名字的文件、存放到哪里）
- module.loaders 是最關鍵的一塊配置。它告知 webpack 每一種文件都需要使用什么加載器來處理。 所有加載器需要使用npm來加載
- 最后是 resolve 配置，配置查找模塊的路徑和擴展名和別名（方便書寫）
一個簡單的示例
1.配置文件
var webpack = require('webpack');
module.exports = {
entry: "./index.js",
output: {
path: __dirname,
filename: "bundle.js"http://index與bundle文件平級與index.html平級
},
module: {
loaders: [
{ test: /\.css$/, loader: "style!css" }
]
}
};
2.html文件
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script type="text/javascript" src="bundle.js" charset="utf-8"></script>
</body>
</html>
3.安裝加載器css-loader
$ npm install css-loader style-loader --save-dev
4.入口文件編寫
//在index.js中寫入
document.write("看看如何讓它工作！");
兩種運行方式
- 直接運行webpack命令,然后打開index.html
$ webpack
- 安裝服務器插件
$ npm install webpack-dev-server -g
$ webpack-dev-server --progress --colors
打開localhost:8080即可運行
