webpack
介紹
Webpack 是一個模塊打包器婶芭。它將根據(jù)模塊的依賴關(guān)系進行靜態(tài)分析，然后將這些模塊按照指定的規(guī)則生成對應(yīng)的靜態(tài)資源泛鸟；
開發(fā)便捷，能替代部分 grunt/gulp 的工作踊东，比如打包北滥、壓縮混淆、圖片轉(zhuǎn)base64等
安裝
// 全局安裝
npm install webpack -g
// 進入項目闸翅，安裝到項目依賴中
npm init
npm install webpack --save-dev
配置文件
每個項目下都必須配置有一個 webpack.config.js 再芋，它的作用如同常規(guī)的 gulpfile.js/Gruntfile.js，作為配置項告訴 webpack 如何工作坚冀。
默認情況下济赎，會搜索當前目錄的
webpack.config.js文件，這個文件是一個 node.js 模塊，返回一個 json 格式的配置信息對象司训，或者通過--config選項來指定配置文件
例子：
module.exports = {
entry: "./entry.js",
output: {
path: __dirname + "/dist",
filename: "bundle.js"
},
module: {
loaders: [
{ test: /\.css$/, loader: "style!css" }
]
}
};
Loader
Loader 用于預(yù)處理文件
使用方式
- 通過
require指定 - webpack.config.js 中配置
- 命令行執(zhí)行
插件 Plugins
通過插件可以添加特定功能
- 內(nèi)嵌插件
- 第三方插件
DefinePlugin
內(nèi)嵌插件构捡，無需安裝
用于在編譯期間定義常量
使用
例子：
new webpack.DefinePlugin({
PRODUCTION: JSON.stringify(true),
VERSION: JSON.stringify("5fa3b9"),
BROWSER_SUPPORTS_HTML5: true,
TWO: "1+1",
"typeof window": JSON.stringify("object")
})
copy-webpack-plugin
拷貝資源插件
官方這樣解釋
Copy files and directories in webpack,在webpack中拷貝文件和文件夾
安裝
npm install --save-dev copy-webpack-plugin
使用
new CopyWebpackPlugin([patterns], options)
在 web pack.config.js 中添加：
var CopyWebpackPlugin = require("copy-webpack-plugin");
module.exports = {
plugins: [
...
new CopyWebpackPlugin([{
from: __dirname + '/src/index.html',
to: __dirname + '/dist'
}]),
...
]
}
配置項
clean-webpack-plugin
刪除編譯資源
在編譯前，刪除之前編譯結(jié)果目錄或文件
安裝
npm install clean-webpack-plugin --save-dev
使用
在 web pack.config.js 中添加：
var CleanPlugin = require("clean-webpack-plugin");
module.exports = {
...
plugins: [
...
new CleanPlugin(['dist', 'build']),
...
]
...
｝
dist 與 build 為需要刪除資源
html-webpack-plugin
自動生成html插件
生成 HTML5 文件并注入 webpack 綁定的一系列 js & css壳猜，生成對應(yīng)<script>及<link>標簽
https://github.com/ampedandwired/html-webpack-plugin
安裝
npm install html-webpack-plugin --save-dev
使用
在 web pack.config.js 中添加：
var HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
...
plugins: [
...
new HtmlWebpackPlugin({
filename: 'index.html',
template:'./src/template.html',
})
...
]
...
｝
配置項
filename: 生成文件名稱勾徽，默認 index.html
template: 模版文件目錄及名稱
注意
此插件會受到 file-loader 的影響
編譯 ES6
安裝 loaders
安裝 babel-loader
npm install babel-loader --save-dev
安裝轉(zhuǎn)碼規(guī)則
npm install babel-preset-es2015 --save-dev
webpack.config.js 文件添加以下內(nèi)容
......
module: {
loaders: [
...
{ test: /\.jsx?$/,loader: 'babel-loader', query: {presets: ['es2015']}}
]
},
resolve:{
extensions:['','.js','.jsx']
},
......
擴展工具
atool-build
基于 webpack 構(gòu)建封裝
集成了一些常用的 loaders 與 plugins
安裝
npm i atool-build -g
