webpack基礎配置
摘要：
學習了下webpack華麗花哨讓人頭疼的基礎配置，趕緊來做個記錄。
先初始化package.json,再安裝個webpack和webpack-dev-server：
npm init -y
npm i webpack webpack-dev-server -D//-D只在開發時使用
...
學習了下webpack華麗花哨讓人頭疼的基礎配置，趕緊來做個記錄。 先初始化package.json,再安裝個webpack和webpack-dev-server：
npm init -y npm i webpack webpack-dev-server -D//-D只在開發時使用 複製程式碼
安裝完成後在根目錄下建立個webpack.config.js,我們來看看基礎配置項都有哪些。
基本配置模組
let path = require('path') //webpack遵循node規範，使用require進行引入
module.exports = {
entry: './src/index.js', //入口
output: {
filename: "js/[name][hash:8].js", //給輸出的js打hash號
path: path.resolve('./static') //必須是絕對路徑
}, //出口
devServer: {}, //開發伺服器
module: {}, //模組配置
plugins: [], //外掛配置
mode: "development", //可以更改模式
resolve: {}, //配置解析
}
複製程式碼
檔案入口是src目錄下的index.js,打包好的js都放入static目錄下的js目錄中。
在package.js中配置相關命令，到時候只需要在命令列輸入npm run xxx就可以執行了。
{
...
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack ",
"start": "webpack-dev-server"
}
...
}
複製程式碼
伺服器配置
接下來給伺服器進行配置。
module.exports = {
...
devServer: {//webpack-dev-server配置
contentBase: './dev', //執行時檔案打包資料夾（不可見）
port: 6767, //執行埠
compress: true, //伺服器壓縮
open: true, //自動開啟瀏覽器
hot: true //熱更新}, //開發伺服器
}
...
}
複製程式碼
配置完成後在命令列輸入npm run start就可以啟動伺服器。
plugins外掛配置
plugins 選項用於以各種方式自定義 webpack 構建過程。webpack 附帶了各種內建外掛，可以通過 webpack.[plugin-name] 訪問這些外掛。
先將外掛進行安裝：
npm i html-webpack-plugin clean-webpack-plugin extract-text-webpack-plugin copy-webpack-plugin -D 複製程式碼
let HtmlWebpackPlugin = require('html-webpack-plugin') //html-webpack-plugin html自動引入打包的js
let CleanWebpackPlugin = require('clean-webpack-plugin') //清除舊的打包js
let webpack = require('webpack')
let ExtractTextWebpackPlugin = require('extract-text-webpack-plugin') //打包成單獨css/less檔案
let CopyWebpackPlugin = require('copy-webpack-plugin') //將原檔案複製到打包資料夾
module.exports = {
...
plugins: [
new CopyWebpackPlugin([
{
from: './src/doc', //需要複製的檔案地址
to: './' //打算複製到的地方
}
]),
new ExtractTextWebpackPlugin({
filename: 'css/index.css', //打包後的檔案
disable: true //開發時不需要使用單獨打包，可以開啟disable屬性
}),
new webpack.HotModuleReplacementPlugin(), //熱更新外掛
new CleanWebpackPlugin(), //清除舊的打包js
new HtmlWebpackPlugin({
filename: "index.html", //生成的html名字
template: "./src/index.html", //模板html所在位置
title: "index", //更改html對應title
hash: true, //給js打版本號！
minify: { //壓縮
removeAttributeQuotes: true, //刪掉屬性雙引號
collapseWhitespace: true //摺疊空行
},
}),//html-webpack-plugin html自動引入打包的js
], //外掛配置
...
}
複製程式碼
如果想要檢視外掛的文件，可以開啟地址https://www.npmjs.com/package/包名字，進行檢視，例如：www.npmjs.com/package/htm…
module模組配置
要想配置處理模組的規則，我們就在module中進行配置。 先安裝需要外掛：
npm i extract-text-webpack-plugin css-loader style-loader postcss-loader less-loader autoprefixer -D 複製程式碼
let ExtractTextWebpackPlugin = require('extract-text-webpack-plugin') //打包成單獨css/less檔案
module.exports = {
...
module: {
rules: [ //從右往左解析
{
test: /\.css$/, use: ExtractTextWebpackPlugin.extract({
fallback: 'style-loader',
use: [
{loader: "css-loader"},
{loader: "postcss-loader"} //加字首
]
})
},
{
test: /\.less$/,
use:ExtractTextWebpackPlugin.extract({
fallback: 'style-loader',
use: [
{loader: "css-loader"},
{loader: "postcss-loader"}, //加字首
{loader: "less-loader"}
]
})
}
]
}, //模組配置
...
}
複製程式碼
希望給css自動加上瀏覽器可以識別的字首則需要在postcss-loader中使用autoprefixer外掛。postcss-loader的使用需要在根目錄下建立postcss.config.js，配置如下：
module.exports = {
plugins: [
require('autoprefixer')
]
}
複製程式碼
重新啟動伺服器就會自動給css加上字首。
如果你還想把px轉換成rem，可以加上postcss-pxtorem外掛：
npm i postcss-pxtorem -D 複製程式碼
postcss.config.js配置如下：
const pxtorem = require('postcss-pxtorem');
module.exports = {
plugins: [
require('autoprefixer'),
pxtorem({
rootValue: 32, //根元素
unitPrecision: 5, //保留小數位
// selectorBlackList: ['van'], // 忽略轉換正則匹配項
propList: ['*']
})
]
}
複製程式碼
完整配置檔案可以去git檢視webpack-config