概覽
新建項目
npm init -y安裝webpack & webpack-cli
(c)npm install -D webpack
(c)npm install -D webpack-cli
# 查看webpack版本
(npx )webpack --version試打包
src/index.js
document.write('Hello Webpack -Mazey')dist/index.html
<!doctype html>
<html>
<head>
<title>Start Webpack</title>
</head>
<body>
<script src="bundle.js"></script>
</body>
</html>webpack.config.js
const path = require('path')
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
}項目命令行運行：
webpack --config webpack.config.js --mode development
# 出現
Hash: 1ae48c1f7dc49168e983
Version: webpack 4.6.0
Time: 63ms
Built at: 2018-05-03 14:37:02
Asset Size Chunks Chunk Names
bundle.js 2.84 KiB main [emitted] main
Entrypoint main = bundle.js
[./src/index.js] 38 bytes {main} [built]此時 dist/ 下多了一個 bundle.js 文件， 打開 dist/index.html 出現 Hello Webpack -Mazey。
在package.json定製腳本
{
// ...
"scripts": {
"dev": "webpack --config webpack.config.js --mode development",
"build": "webpack --mode production"
},
// ...
}
# or
{
// ...
"scripts": {
"dev": "webpack-dev-server --devtool eval --progress --colors",
"deploy": "NODE_ENV=production webpack -p"
},
// ...
}然後命令行運行 npm run dev 便等於 webpack --config webpack.config.js --mode development。
一、入口[entry]
語法
1.單個入口語法
entry: string|Array<string>示例：
// ...
entry: './src/index.js'
// ...
# 等於
// ...
entry: {
main: './src/index.js'
}
// ...2.對象語法
entry: {[entryChunkName: string]: string|Array<string>}示例：
// ...
entry: {
app: './src/app.js',
vendors: './src/vendors.js'
}
// ....二、輸出[output]
語法
// ...
output: {
filename: <output filename>,
path: <path>
}
// ...- filename: 用於輸出文件的文件名。
- path: 目標輸出目錄的絕對路徑。
示例：
const path = require('path')
const config = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
}
module.exports = config若配置多個入口，爲保證每個文件具有唯一名稱，需要用到佔位符。
// ...
filename: '[name].js',
// ...三、模式[mode]
語法
mode: string- development: 會將 process.env.NODE_ENV 的值設爲 development。啓用 NamedChunksPlugin 和 NamedModulesPlugin。
- production: 會將 process.env.NODE_ENV 的值設爲 production。啓用 FlagDependencyUsagePlugin, FlagIncludedChunksPlugin, ModuleConcatenationPlugin, NoEmitOnErrorsPlugin, OccurrenceOrderPlugin, SideEffectsFlagPlugin 和 UglifyJsPlugin。
設置 模式 後則不需要在命令後帶上 --mode development。
四、載入器?[loader]
語法
module: {
rules: [
{ test: <.*>, use: <loader> },
{ test: <.*>, use: <loader> }
]
}- test: 標識出應該被對應的 loader 進行轉換的某個或某些文件。
- use: 表示進行轉換時，應該使用哪個 loader。
示例：
const path = require('path')
const config = {
// ...
module: {
rules: [
{ test: /\.css$/, use: 'css-loader' }
]
}
}
module.exports = config碰到“在 require()/import 語句中被解析爲 .css 的路徑”時，打包之前，先使用 css-loader 轉換一下。
五、插件[plugins]
語法
const <PluginName> = require(<plugin-name>)
// ...
plugins: [
new <PluginName>({
<attribute>: <value>
})
]想要使用一個插件，你只需要 require() 它，然後把它添加到 plugins 數組中。