如何配置一個多頁應用webpack工程化模板晌砾？
webpack的四個核心概念：
- entry
- 入口：從哪里開始
- output
- 出口：以什么方式結束
- loader
- 加載器：處理其它非原生JS文件
- plugin
- 插件：我還想做更多事情
項目目錄
|--src
| |--images 圖片
| |--sass 樣式
| |-- reset.scss
| |-- index.scss
| |-- list.scss
| |--includes html公共模板
| |-- head.pug
| |-- foot.pug
| |--js js邏輯相關
| |--util js工具函數(shù)
| |-- common.js
| |-- index.js
| |-- list.js
| |--index.pug
| |--list.pug
|-- webpack.config.js webpack打包配置
|-- package.json 項目依賴信息
|-- README.md 項目說明
|-- .gitignore git忽略配置
webpack配置
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
// 環(huán)境變量配置簿废，dev / online
var WEBPACK_ENV = process.env.WEBPACK_ENV || 'dev';
var config = {
entry: {
'index': './src/js/index.js',
'list': './src/js/list.js',
'about': './src/js/about.js'
},
output: {
path: __dirname + '/dist/',
publicPath: 'dev' === WEBPACK_ENV ? '/dist/' : '//leyou319.github.io/multipage_webpack/dist/',
filename: 'js/[name].js'
},
module: {
rules: [
{
test: /\.scss$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: ['css-loader?sourceMap=true', 'sass-loader?sourceMap=true']
})
},
{
test: /\.(png|jpg|gif)$/,
use: 'url-loader?limit=8192&name=images/[name].[ext]?[hash:6]'
},
{
test: /\.pug$/,
use: ['html-loader','pug-html-loader?pretty=true']
}
]
},
plugins: [
new ExtractTextPlugin('css/[name].css'),
new webpack.optimize.CommonsChunkPlugin({
name : 'common',
filename : 'js/common.js'
}),
],
externals : {
'jquery' : 'window.jQuery'
},
devServer: {
inline: true,
proxy: {
'/ajaxload': {
target: 'http://www.gitchic.com',
secure: false,
changeOrigin: true
}
}
}
}
Object.keys(config.entry).forEach(function(page){
config.plugins.push( new HtmlWebpackPlugin({
template: './src/'+ page +'.pug',
filename: page+'.html',
inject: true,
hash: true,
chunks: ['common', page]
}) );
});
if('dev' === WEBPACK_ENV){
config.devtool = 'inline-source-map';
}
module.exports = config;
package配置
"scripts": {
"dev": "webpack-dev-server",
"build": "set WEBPACK_ENV=online && webpack -p"
}
命令行相關
1. 開發(fā)環(huán)境
npm run dev
2. 生產打包
npm run build
