一酗洒、安裝
npm install --save-dev webpack //默認(rèn)最新版本
npm install --save-dev webpack@<version>
如果使用 webpack 4+版本窗骑，還需要安裝 CLI
npm install --save-dev webpack-cli
二但惶、配置
創(chuàng)建webpack.config.js配置文件
//webpack.config.js
const path = require('path')
module.exports = {
entry: './src/index.js', //入口文件
output: { //輸出文件
filename: 'bundle.js', //打包后的文件
path: path.resolve(__dirname, 'dist') //存放位置
}
}
創(chuàng)建完簡(jiǎn)單的配置文件耳鸯，打開(kāi)cmd進(jìn)入項(xiàng)目文件路徑湿蛔，輸入指令執(zhí)行打包
> webpack //默認(rèn)選擇使用 webpack.config.js
OR
> webpack --config webpack.base.js //指定webpack.base.js 配置文件
Options 之 resolve
resolve: {
extensions: ['.js','.vue','.json'], //解決后綴
alias: {
'vue$': 'vue/dist/vue.esm.js', //別名,用來(lái)解決runtime-compiler模式在瀏覽器的問(wèn)題
...
}
}
三、loader加載器
加載CSS
①安裝 style-loader 县爬、css-loader
npm install --save-dev style-loader css-loader
②配置webpack.config.js 的 module 使用style-loader 阳啥、css-loader
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
},
...
]
}
③使用
通過(guò)在項(xiàng)目中添加一個(gè).css 文件，并將其導(dǎo)入到我們的入口文件index.js中
//index.js
import '.css文件路徑'
加載圖片
①安裝 file-loader 财喳、url-loader
npm install --save-dev file-loader url-loader
②配置webpack.config.js 的 module 使用file-loader 察迟、url-loader
module: {
rules: [
{
test: /\.(png|svg|jpg|gif)$/,
use: [
{
loader: 'file-loader'
},
{
loader: 'url-loader',
options: {
limit: 8192 //當(dāng)文件小于8192B會(huì)把圖片轉(zhuǎn)化為base64的格式
}
}
]
},
...
]
}
③使用
通過(guò)在項(xiàng)目中的.css文件設(shè)置背景圖片
//style.css
body{
background: url('圖片文件路徑')
}
ES6轉(zhuǎn)ES5
①安裝 babel-loader、babel-core耳高、babel-preset-es2015
npm install babel-loader babel-core babel-preset-es2015
②配置webpack.config.js 的 module 使用babel-loader扎瓶、babel-core、babel-preset-es2015
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['es2015']
}
}
},
...
]
}
四泌枪、Plugins
html-webpack-plugin
安裝
npm install --save-dev html-webpack-plugin
配置webpack.conifg.js文件options中的 plugins
//先導(dǎo)入模塊
const HtmlWebpackPlugin = require('html-webpack-plugin');
//再配置options
plugins: [
new HtmlWebpackPlugin(),
...
]
該插件將為你生成一個(gè) HTML5 文件概荷， 其中包括使用 script 標(biāo)簽的 body 中的所有 webpack 包。
uglifyjs-webpack-plugin
安裝
npm i -D uglifyjs-webpack-plugin //-D 即--save-dev
配置webpack.conifg.js文件options中的 plugins
//先導(dǎo)入模塊
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
//再配置options
plugins: [
new UglifyJsPlugin(),
...
]
