本文基于我的另一篇文章webpack基本配置的基礎(chǔ)上新增了一些常用插件和loader的安裝
安裝
安裝之前請確保電腦已經(jīng)安裝了node.js
新建目錄
npm init // 項目初始化
npm install webpack webpack-cli -D // 安裝webpack和webpack命令行工具
配置
- 安裝完成后新建目錄結(jié)構(gòu)
node_modules // 項目依賴 （默認(rèn)生成）
package.json // 項目描述 （默認(rèn)生成）
src // 源碼目錄 （手動創(chuàng)建）
index.js // 入口js文件
views // 視圖文件夾 （手動創(chuàng)建）
index.html // 入口html文件
webpack.config.js // webpack配置文件 （手動創(chuàng)建）
- 打開webpack.config.js撩银，編輯內(nèi)容
const path = require('path'); // 引入node里面內(nèi)置的path模塊
module.expres = {
entry:'./src/index.js', // 入口文件位置
output:{
filename:'bundle.js', // 打包完成后的文件名
path:path.join(__dirname,'dist') // 打包完成后輸出的位置
}
}
- 配置項目腳本文件
打開package.json文件，新建項目腳本
{
......
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build":"webpack" // 添加腳本
},
......
}
- 輸入命令 npm run build香嗓，出現(xiàn)下列代碼，就說明打包成功
使用webpack-dev-server
webpack-dev-server 是一個簡單的 web 服務(wù)器装畅，并且能夠?qū)崟r重新加載靠娱。
- 安裝
npm install webpack-dev-server -D
- 打開webpack.config.js，添加webpack-dev-server配置
entry:'./src/index.js',
output:{
filename:'bundle.js',
path:path.join(__dirname,'dist')
},
// wepack-dev-server 配置
devServer:{
port:8080, // 配置端口為8080
hot:true, // 打開熱更新
open:true, // 啟動后打開瀏覽器
contentBase:'./views' // 設(shè)置views目錄下的文件為服務(wù)器根目錄
}
- 配置項目腳本文件
打開package.json文件掠兄，新建項目腳本
{
......
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build":"webpack",
"dev":"webpack-dev-server" // 添加腳本
},
......
}
- 輸入命令 npm run dev像云，出現(xiàn)下列代碼，就說明配置成功
i ?wds?: Project is running at http://localhost:8080/
i ?wds?: webpack output is served from /
i ?wds?: Content not from webpack is served from ./views
i ?wdm?: wait until bundle finished: /
i ?wdm?: Hash: a098c315bf6e497c3966
使用webpack插件
插件是 webpack 的支柱功能蚂夕。webpack 自身也是構(gòu)建于迅诬，你在 webpack 配置中用到的相同的插件系統(tǒng)之上！
插件目的在于解決 loader 無法實現(xiàn)的其他事婿牍。
html-webpack-plugin
官網(wǎng)是這么說的
HtmlWebpackPlugin簡化了HTML文件的創(chuàng)建百框，以便為你的webpack包提供服務(wù)。這對于在文件名中包含每次會隨著編譯而發(fā)生變化哈希的 webpack bundle 尤其有用牍汹。 你可以讓插件為你生成一個HTML文件铐维，使用lodash模板提供你自己的模板，或使用你自己的loader慎菲。
解釋
html-webpack-plugin 插件是用于編譯 Webpack 項目中的 html 類型的文件嫁蛇，如果直接將 html 文件置于 ./src 目錄中，用 Webpack 打包時是不會編譯到生產(chǎn)環(huán)境中的露该，html-wepack-plugin就解決了這個問題睬棚，可以將js動態(tài)的插入到html當(dāng)中
- 安裝
npm install html-webpack-plugin -D
- 配置
打開webpack.config.js文件，編輯內(nèi)容
const path = require('path');
const htmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry:'./src/index.js',
output:{
filename:'bundle.js',
path:path.join(__dirname,'dist')
},
devServer:{
port:8080,
hot:true,
open:true,
contentBase:'./views'
},
// 添加內(nèi)容
plugins:[
new htmlWebpackPlugin({
filename:'index.html',
template:'./views/index.html'
})
]
}
mini-css-extract-plugin
該插件用于把css單獨抽出為樣式文件
- 安裝
npm install mini-css-extract-plugin -D
- 配置
打開webpack.config.js文件，編輯內(nèi)容
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
......
plugins:[
new htmlWebpackPlugin({
filename:'index.html',
template:'./views/index.html'
}),
new MiniCssExtractPlugin({
filename: 'style.css',
//所有的css文件抽出為style.css
}),
],
module: {
rules: [
{ test: /\.css$/, use: [MiniCssExtractPlugin.loader, 'css-loader'] },
{ test: /\.less$/, use: [MiniCssExtractPlugin.loader, 'css-loader', 'less-loader'] },
{ test: /\.(ttf|eot|svg|woff|woff2)$/, use: 'url-loader' },
]
}
optimize-css-assets-webpack-plugin && uglifyjs-webpack-plugin
optimize-css-assets-webpack-plugin 用來優(yōu)化css
uglifyjs-webpack-plugin 用來優(yōu)化js
- 安裝
cnpm install optimize-css-assets-webpack-plugin uglifyjs-webpack-plugin -D
- 配置
編輯weboack.config.js 配置文件
// 引入插件
const OptimizeCss= require('optimize-css-assets-webpack-plugin');
const UglifyjsWebpackPlugin = require("uglifyjs-webpack-plugin");
module.exports = {
......
optimization: {
minimizer: [
new OptimizeCss({}),
new UglifyjsWebpackPlugin()
]
},
}
使用loader
webpack 可以使用 loader 來預(yù)處理文件抑党。這允許你打包除 JavaScript 之外的任何靜態(tài)資源包警。你可以使用 Node.js 來很簡單地編寫自己的 loader
css-loader
css-loader用來分析css引用關(guān)系
style-loader用來生成樣式內(nèi)容插入到header里面
- 安裝
css-loader依賴style-loader
npm install style-loader css-loader -D
- 配置
打開weboack.config.js 編輯內(nèi)容
plugins: [
new htmlWebpackPlugin({
filename: 'index.html',
template: './views/index.html'
})
],
// 添加內(nèi)容
module: {
rules: [
{
test: /\.css$/, use: ['style-loader','css-loader']
}
]
}
url-loader
file-loader 將文件發(fā)送到輸出文件夾，并返回（相對）URL
url-loader 像 file loader 一樣工作底靠，但如果文件小于限制害晦，可以返回 data URL
- 安裝
url-loader依賴file-loader
npm install url-loader file-loader -D
- 配置
打開weboack.config.js 編輯內(nèi)容
module: {
rules: [
{ test: /\.css$/, use: ['style-loader','css-loader'] },
{ test: /\.(ttf|eot|svg|woff|woff2)$/, use: 'url-loader' },
{ test: /\.(ttf|eot|svg|woff|woff2)$/, use: ['url-loader'] },
{ test: /\.(jpg|png|tmp|gif)$/, use: [
{
loader:'url-loader',
options:{
limit:1024 * 20
// 單位為字節(jié)
// 低于指定的限制時，返回一個 DataURL暑中。
},
},
'image-webpack-loader'
// image-webpack-loader用于壓縮圖片
]
},
]
}
less-loader
less-loader 用來解析less語法壹瘟，配置后可以在項目中使用less
- 安裝
npm install less-loader less -D;
- 配置
打開weboack.config.js 編輯內(nèi)容
module: {
rules: [
{ test: /\.css$/, use: ['style-loader','css-loader'] },
{ test: /\.less$/, use: ['style-loader', 'css-loader','less-loader'] },
{ test: /\.(ttf|eot|svg|woff|woff2)$/, use: 'url-loader' }
]
}
postcss-loader
postcss-loader 應(yīng)該是 Webpack 配置中不可或缺的一個 CSS loader。它負(fù)責(zé)進(jìn)一步處理 CSS 文件鳄逾，比如添加瀏覽器前綴稻轨，壓縮 CSS 等。
- 安裝
autoprefixer用于添加瀏覽器前綴
npm install postcss-loader autoprefixer -D;
- 配置
編輯weboack.config.js 配置文件
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader',
{
loader: 'postcss-loader',
options: {
plugins: [require('autoprefixer')]
}
}
]
}
]
}
在package.json中添加內(nèi)容
"browserslist": [
"> 1%",
"last 2 versions"
]
