目的:從零開始配置webpack
,使用pug
、typescript
、scss
。javascript
緣由:webpack
雖然接觸的多,但沒有從零開始配置過項目。通常都是經過各類CLI
工具生成項目(VueCli
),webpack
已經由cli
工具配置好了,在實際的開發中,遇到的相關問題都只要針對性的去查找資料基本都能解決,因此對webpack
的瞭解一直都比較片面和瑣碎,缺少一個總體性的瞭解,更沒法談「理解」了。css
之前都是跳着走的,如今趁着不是很忙,回到起點從新走一下吧。html
首先建立一個項目文件夾,如webpack-demo
vue
在根目錄下執行:java
npm init -y
複製代碼
初步設置項目的目錄結構和功能劃分node
// 建立如下文件夾和文件
public/
index.html // 模板文件
src/ // 工做區
assets/ // 圖片、外部樣式等資源
module/ // 頁面模塊
main.js // 入口文件
webpack.config.js // webpack配置文件
複製代碼
webpack
npm install --save-dev webpack webpack-cli webpack-dev-server
webpack
npm install --save-dev html-webpack-plugin clean-webpack-plugin
git
webpack-cli
:在webpack3
中,webpack
和它的CLI
在同一個包中,但在webpack4
中已經將二者分開,以更好的管理他們。github
html-webpack-plugin
: webpack中文網、githubweb
簡單的說就是把你打包的js
插入的你的html
中。
clean-webpack-plugin
:github,一個webpack
插件,用於在構建以前刪除您的構建文件夾
webpack.config.js
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
module.exports = {
mode: 'production',
// 入口
entry: {
app: './src/main.js'
},
// 出口
output: {
path: path.resolve(__dirname, './dist/'),
filename: './js/[name].[hash:8].js'
},
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
template: './public/index.html'
})
]
}
複製代碼
package.json
{
"script": {
"build": "webpack"
}
}
複製代碼
npm run build
打包成功:)
pug
相關(觸類旁通:使用vue
)
npm install --save-dev pug pug-loader
pug
:一種html
渲染模板中文文檔
/public/index.html
改成pug
格式的文件doctype html
htm(lang="en")
head
meta(charset="UTF-8")
title= 'webpack-demo'
body
div#app
複製代碼
webpack.config.js
module.exports = {
module: {
rules: [
// 增長處理pug文件的loader
{
test: /\.pug$/,
loader: 'pug-loader'
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './public/index.pug' // 修改文件後綴
})
]
}
複製代碼
ES6
支持(babel
)
npm install --save-dev babel-loader @babel/core @babel/preset-env
webpack.config.js
增長對js
文件的處理。
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: 'babel-loader'
}
]
}
複製代碼
.babelrc
配置文件相關參考{
"presets": ["@babel/preset-env"]
}
複製代碼
typescript
支持
npm install --save-dev typescript ts-loader
main.js
改成main.ts
// 增長一個typescript測試代碼
function test(str: string) {
console.log(`console log ${str}`)
}
test('test')
複製代碼
webpack.config.js
module.exports = {
entry: {
app: './src/main.ts' // 修改文件後綴
},
module: {
rules: [
// 配置處理typescript文件的loader
{
test: /\.ts$/,
loader: 'ts-loader'
}
]
}
}
複製代碼
tsconfig.json
在根目錄下建立tsconfig.json
。相關參考
{
"compilerOptions": {
"module": "commonjs",
"target": "es5",
"sourceMap": true,
"importHelpers": true
},
"exclude": [
"node_modules"
]
}
複製代碼
SCSS
支持
npm install --save-dev css-loader mini-css-extract-plugin node-sass sass-loader
css-loader
:解析 CSS
文件後,使用import
加載,而且返回 CSS
代碼sass-loader
:加載和轉譯 SASS/SCSS
文件mini-css-extract-plugin
:輕量級CSS
提取插件github/src/style.scss
文件$--default-bg-color: #808080;
#app {
width: 100%;
height: 100px;
background-color: $--default-bg-color;
}
複製代碼
/src/main.ts
中引入樣式import './style.scss'
複製代碼
webpack.config.js
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
module.exports = {
module: {
rules: [
{
test: /\.scss/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'sass-loader'
]
}
]
},
plugins: [
// 提取CSS文件
new MiniCssExtractPlugin({
filename: './css/[name].css',
chunkFilename: '[id].css',
ignoreOrder: false
})
]
}
複製代碼
PostCss
支持postcss
是一種對css
進行編譯的工具,相似於Babel
對javascript
的處理,經常使用的功能有:
css
語法postcss
經過插件實現這些功能,
npm i --save-dev postcss-loader autoprefixer
autoprefixer
:postcss
插件,使用Can I Use中的值向css
中添加瀏覽器前綴。postcss.config.js
文件module.exports = {
plugins: {
'autoprefixer': {}
}
}
複製代碼
webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.scss/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'postcss-loader',
'sass-loader'
]
}
]
}
}
複製代碼
browserslist
關於browserslist
,官方的解釋是The config to share target browsers and Node.js versions between different front-end tools.
在本示例中是配合autoprefixer
、babel
、postcss
使用的。
.browserslistrc
文件last 1 version
> 1%
maintained node versions
not dead
複製代碼
npm install --save-dev file-loader url-loader html-loader
webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.(png|svg|jpg|gif|webp)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 1024 * 30,
outputPath: 'image',
fallback: 'file-loader'
}
}
]
}
]
}
}
複製代碼
在src/style.scss
中添加圖片引入,例如
.app {
background-image: url("./assets/bg-banner.jpg");
}
複製代碼
建立src/index.pug
文件,並引入圖片,例如
img(src=require('./assets/bg-banner.jpg'))
複製代碼
在main.ts
中引入index.pug
const template: any = require('./index.pug')
document.getElementById('app').innerHTML = template()
複製代碼
而後發現css中的圖片路徑不對......
修改一下相關的配置就行了。
// webpack.config.js
{
test: /\.scss$/,
use: [
// 增長路徑處理
{
loader: MiniCssExtractPlugin.loader,
options: {
publicPath: '../'
}
},
'css-loader',
'postcss-loader',
'sass-loader'
]
}
複製代碼
webpack-dev-server
可以用於快速開發應用程序。
npm install --save-dev webpack-dev-server
webpack.config.js
module.exports = {
// 更多配置參考:https://www.webpackjs.com/configuration/dev-server/
devServer: {
contentBase: path.join(__dirname, "dist"),
compress: true, // 一切服務都啓用gzip壓縮
port: 8090, // 服務啓動端口
}
}
複製代碼
package.json
{
"script": {
"serve": "webpack-dev-server --open --mode development"
}
}
複製代碼
--open
:直接在瀏覽器打開服務。
webpack
流水線進階工做報告劇本暫無、日期未定、敬請期待。