github
以往文章：
重溫webpack：骨架搭建
準備
dev-server需要解決我們的哪些問題？
- 開發(fā)環(huán)境熱模塊替換
- 自動刷新
- debug追蹤到原文件枉侧。source-map的解釋
開啟dev-server要區(qū)分好生產(chǎn)環(huán)境與開發(fā)環(huán)境吉拳，先前瘟则，我們都是直接生成生產(chǎn)環(huán)境鱼响，現(xiàn)在我們需要使用webpack-merge進行區(qū)分阱当。
npm i dev-server -D- 修改
package.json
"script": {
"build": "./build/build.js",
"dev": "dev-server --config ./build/dev.js"
}
- 調(diào)整基礎(chǔ)結(jié)構(gòu)石咬，拆分生產(chǎn)環(huán)境與開發(fā)環(huán)境揩悄。生產(chǎn)環(huán)境構(gòu)建
// 在之前的基礎(chǔ)上，我們在開發(fā)環(huán)境中并不需要單獨打包css
/**** base config ****/
const utils = require('./utils')
const path = require('path')
const CleanWebpackPlugin = require('clean-webpack-plugin');
const ExtractTextWebpackPlugin = require('extract-text-webpack-plugin')
module.exports={
entry:utils.entries(),
output:{
filename:'[name].js',
path:path.resolve(__dirname,'../dist')
},
module: {
rules: [
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
use: [
{
loader: 'file-loader',
options: {
name: 'img/[name].[hash:7].[ext]'
}
}
]
},
{
test: /\.html$/,
use: 'html-loader'
}
]
},
plugins:[
new CleanWebpackPlugin(),
].concat(utils.htmlPlugins())
}
/**** 生產(chǎn)環(huán)境 build.js ****/
const baseConfig = require('./webpack.config')
const webpack = require('webpack')
const merge = require('webpack-merge')
const ExtractTextWebpackPlugin = require('extract-text-webpack-plugin')
const config = merge(baseConfig, {
module: {
rules: [
{
test: /\.css$/,
use: ExtractTextWebpackPlugin.extract({
fallback:'style-loader',
use:'css-loader'
})
}
],
},
plugins: [
new ExtractTextWebpackPlugin('css/[name].css')
]
})
webpack(config, function(err){
if (err) throw err
console.log('product......')
})
- 配置dev-server
/**** dev.js ****/
const baseConfig = require('./webpack.config')
const merge = require('webpack-merge')
const webpack = require('webpack')
const config = merge(baseConfig, {
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
]
},
// https://segmentfault.com/a/1190000004280859
// devtool: 'inline-source-map',
devServer: {
contentBase: '/',
// 監(jiān)聽的端口
port: 8080,
// 使用熱模塊替換
hot: true,
// 自動打開頁面
open: true,
// 顯示打包進度
progress: true,
// 報錯在頁面打出
overlay: {
warnings: false,
errors: true
},
// watchOptions: {
// // 文件更改后延遲刷新,毫秒為單位進行輪詢鬼悠。
// poll: 5000
// //
// aggregateTimeout: 1000
// }
},
plugins: [
// 加載熱模塊替換包
new webpack.HotModuleReplacementPlugin()
]
})
module.exports = config
// package.json
- "dev": "dev-server --config ./build/dev.js"
+ "dev": "dev-server --config ./build/dev.js --inline" // 實時更新
// 很疑惑的是inline配置在devServer中并不啟作用删性，放在command反而是可行的
公共模塊的提取
代碼分離是 webpack 中最引人注目的特性之一。此特性能夠把代碼分離到不同的 bundle 中厦章，然后可以按需加載或并行加載這些文件镇匀。代碼分離可以用于獲取更小的 bundle，以及控制資源加載優(yōu)先級袜啃，如果使用合理汗侵，會極大影響加載時間。
代碼分離
/**** build.js ****/
// 相當于為每個入口文件提取公共模塊
+ const utils = require('./utils')
+ new webpack.optimize.CommonsChunkPlugin({
+ name: 'common',
+ filename: 'common/[name].bundle.js',
+ minChunks: utils.htmlPlugins().length
+ }),
/**** utils.js ****/
let conf = {
filename:filename+'.html',
template:path.resolve(PAGE_PATH,filename+'/'+filename+'.html'),
- chunks:[filename]
+ chunks:[filename, 'common']
inject:true,
}
最后群发， 更多細節(jié)可以從我的github上clone下來試試~~
