如果你還沒有看第一篇 請先看下第一篇的基礎知識：webpack開發配置
開發技巧
啟用source-map
現在的代碼是合并以后的代碼，不利于排錯和定位，只需要在config中添加
...
devtool: 'eval-source-map',
...
這樣出錯以后就會采用source-map的形式直接顯示你出錯代碼的位置。
配置webpack-dev-server代理
既然常用webpack做React一類的SPA，那么一個典型的例子就是前后端分離。后端是一個RESTful的server不管用什么寫的。假定在本機他是類似[http://localhost:5000/api/@*
]這類的請求，現在添加配置讓ajax請求可以直接proxy過去。
devServer: {
hot: true,
inline: true,
//其實很簡單的，只要配置這個參數就可以了
proxy: {
'/api/*': {
target: 'http://localhost:5000',
secure: false
}
}
},
更多的方法可以看官方文檔 Webpack dev server proxy
使用preLoaders和postLoaders
也許你想在寫代碼的時候檢查自己的js是否符合jshint的規范，那么隆重推薦preLoaders和postLoaders，上一節我們已經非常了解loaders了，用它來處理各種類型的文件。perLoaders顧名思義就是在loaders執行之前處理的，webpack的處理順序是perLoaders - loaders - postLoaders。
在config文件中配置
module: {
...
//和loaders一樣的語法，很簡單
perLoaders: [
{
test: /\.jsx?$/,
include: APP_PATH,
loader: 'jshint-loader'
}
]
}
...
//配置jshint的選項，支持es6的校驗
jshint: {
"esnext": true
},
好了 現在每次npm run start的時候就可以看到jshint的提示信息啦
加載jQuery plugin或者其他legacy第三方庫
這個是非常有用的內容!
你的項目有時候會要加載各種各樣的第三方庫，一些老的庫不支持AMD或者CommonJS等一些先進的格式，比如一些jQuery的插件，它們都依賴jQuery，如果直接引用就會報錯 jQuery is not undefined這類的錯誤，有幾種方法解決
先創建一個jQuery plugin: plugin.js
(function ($) {
const shade = "#556b2f";
$.fn.greenify = function() {
this.css( "color", shade );
return this;
};
}(jQuery));
第一種方法 使用webpack.ProvidePlugin
...
plugins: [
new HtmlwebpackPlugin({
title: 'Hello World app'
}),
//provide $, jQuery and window.jQuery to every script
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"window.jQuery": "jquery"
})
]
...
在js中引用
...
//這個也不需要了 因為$, jQuery, window.jQuery都可以直接使用了
//import $ from 'jquery';
import './plugin.js';
...
myPromise.then((number) => {
$('body').append('<p>promise result is ' + number + ' now is ' + moment().format() + '</p>');
//call our jquery plugin!
$('p').greenify();
});
...
發現我們插入的p里面的顏色已經變成了綠色！
第二種方法 使用imports-loader
先安裝這個loader
npm install imports-loader --save-dev
然后在入口js中
//注意這種寫法 我們把jQuery這個變量直接插入到plugin.js里面了
//相當于在這個文件的開始添加了 var jQuery = require('jquery');
import 'imports?jQuery=jquery!./plugin.js';
//后面的代碼一樣
myPromise.then((number) => {
$('body').append('<p>promise result is ' + number + ' now is ' + moment().format() + '</p>');
//call our jquery plugin!
$('p').greenify();
});
部署上線
剛才說的各種情況都是在開發時候的情況，那么假如項目已經開發完了，需要部署上線了。我們應該新創建一個單獨的config文件，因為部署上線使用webpack的時候我們不需要一些dev-tools,dev-server和jshint校驗等。
復制我們現有的config文件，命名為 webpack.production.config.js，將里面關于 devServer等和開發有關的東西刪掉。
在package.json中添加一個命令。
"scripts": {
"start": "webpack-dev-server --hot --inline",
"build": "webpack --progress --profile --colors --config webpack.production.config.js"
},
當要上線的時候,運行
npm run build
可以發現build文件夾中生成了所有東西。
分離app.js和第三方庫
現在我們build出來的只有一個bundle.js 如果第三方庫很多的話，會造成這個文件非常大，減慢加載速度，現在我們要把第三方庫和我們app本身的代碼分成兩個文件。
修改entry入口文件
entry: {
app: path.resolve(APP_PATH, 'index.js'),
//添加要打包在vendors里面的庫
vendors: ['jquery', 'moment']
},
添加CommonsChunkPlugin
plugins: [
//這個使用uglifyJs壓縮你的js代碼
new webpack.optimize.UglifyJsPlugin({minimize: true}),
//把入口文件里面的數組打包成verdors.js
new webpack.optimize.CommonsChunkPlugin('vendors', 'vendors.js'),
new HtmlwebpackPlugin({
title: 'Hello World app'
})
]
添加完畢 運行npm run build
在build文件夾中發現如下結構
- budle.js
- index.html
- vendors.js
生成多頁面
應用不可能都是SPA，不可能只生成一個html文件，如果想生成多個html頁面這么玩？其實也是很簡單的: 現在的需求是這樣的，有兩個頁面，一個叫index.html 它需要引用vendors.js和app.js這兩個文件，還有一個mobile.html頁面他要引用vendors.js和mobile.js這兩個文件。
首先新建一個叫mobile.js的入口文件，比app.js更簡單一些
import './main.scss';
import $ from 'jquery';
import 'imports?jQuery=jquery!./plugin.js';
$(document).ready(function() {
let app = document.createElement('div');
app.innerHTML = '<h1>Hello World</h1>';
document.body.appendChild(app);
$('h1').greenify();
});
在config里面配置
entry: {
//三個入口文件，app, mobile和 vendors
app: path.resolve(APP_PATH, 'index.js'),
mobile: path.resolve(APP_PATH, 'mobile.js'),
vendors: ['jquery', 'moment']
},
output: {
path: BUILD_PATH,
//注意 我們修改了bundle.js 用一個數組[name]來代替，他會根據entry的入口文件名稱生成多個js文件，這里就是(app.js,mobile.js和vendors.js)
filename: '[name].js'
},
原來我們是沒有模版文件的，原來利用的HtmlWebpackPlugin的默認模版。誰想到這偉大的插件還可以自定義模版。 所以新建一個專門放模版的文件夾templates,在里面加兩個模版文件index.html 和 mobile.html
index.html
<!DOCTYPE html>
<html>
<head>
<title>{%= o.htmlWebpackPlugin.options.title %}</title>
</head>
<body>
<h3>Welcome to webpack</h3>
</body>
</html>
mobile.html
<!DOCTYPE html>
<html>
<head>
<title>{%= o.htmlWebpackPlugin.options.title %}</title>
</head>
<body>
<h3>Welcome to mobile page</h3>
</body>
</html>
繼續配置config.js,現在讓HtmlwebpackPlugin可以生成多個文件
...
//Template的文件夾路徑
var TEM_PATH = path.resolve(ROOT_PATH, 'templates');
...
plugins: [
...
//創建了兩個HtmlWebpackPlugin的實例，生成兩個頁面
new HtmlwebpackPlugin({
title: 'Hello World app',
template: path.resolve(TEM_PATH, 'index.html'),
filename: 'index.html',
//chunks這個參數告訴插件要引用entry里面的哪幾個入口
chunks: ['app', 'vendors'],
//要把script插入到標簽里
inject: 'body'
}),
new HtmlwebpackPlugin({
title: 'Hello Mobile app',
template: path.resolve(TEM_PATH, 'mobile.html'),
filename: 'mobile.html',
chunks: ['mobile', 'vendors'],
inject: 'body'
})
...
]
然后運行
npm run build
看看生成好的偉大的文件，沒問題！
- app.js
- mobile.js
- vendors.js
- index.html
- mobile.html
看看引用的對應關系，完美！！
index.html
<body>
<h3>Welcome to webpack</h3>
<script src="vendors.js"></script><script src="app.js"></script>
</body>
mobile.html
<body>
<h3>Welcome to mobile page</h3>
<script src="vendors.js"></script><script src="mobile.js"></script>
</body>
生成Hash名稱的script來防止緩存
經典問題,代碼更新了，但是瀏覽器有緩存，到時候就傻了。 怎么解決，換名字唄。可以直接在后面加參數,也可以直接換掉文件名字。 webpack提供給了我們非常簡單的方法，基于文件的md5，只要把
output: {
path: BUILD_PATH,
//只要再加上hash這個參數就可以了
filename: '[name].[hash].js'
},
運行完build以后，看看生成的文件，很完美～
index.html
<body>
<h3>Welcome to webpack</h3>
<script src="vendors.js"></script><script src="app.b6641abee64c999d95c1.js"></script>
</body>
好了，你現在了解webpack作為一個module bundler的精髓了吧，把我們的例子做成一個圖，幫助你理解一下。
文件壓縮
//使用插件html-webpack-plugin打包合并html
//使用插件extract-text-webpack-plugin打包獨立的css
//使用UglifyJsPlugin壓縮代碼
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var webpack = require("webpack");
module.exports = {
entry: {
bundle : './src/js/main.js'
},
output: {
filename: "[name]-[hash].js",
path: __dirname + '/dist'
},
module: {
rules: [
{
test: /\.css$/,
loader: ExtractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
})
}
]
},
resolve:{
extensions:['.js','.css','.json'] //用于配置程序可以自行補全哪些文件后綴
},
plugins:[
new HtmlWebpackPlugin({
title: 'hello webpack',
template:'src/component/index.html',
inject:'body',
minify:{ //壓縮HTML文件
removeComments:true, //移除HTML中的注釋
collapseWhitespace:true //刪除空白符與換行符
}
}),
new ExtractTextPlugin("[name].[hash].css"),
new webpack.optimize.UglifyJsPlugin({
compress: { //壓縮代碼
dead_code: true, //移除沒被引用的代碼
},
except: ['$super', '$', 'exports', 'require'] //混淆,并排除關鍵字
})
]
};
