webpack學(xué)習(xí)筆記
一望艺、 學(xué)習(xí)webpack
1. webpack基本環(huán)境
npm init -ycnpm i webpack webpack-cli -D-
package.json下增加打包腳本
"scripts": {
"build": "webpack"
},
-
npm run build執(zhí)行打包， webpack默認(rèn)是執(zhí)行src/index.js茶袒，然后生成到dist目錄, 相當(dāng)于如下的配置文件webpack.config.js
const path = require('path')
module.exports = {
entry: {
main: './src/index.js'
},
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist')
}
}
-
webpack默認(rèn)會(huì)讀取根目錄下的webpack.config.js,默認(rèn)的模式是production會(huì)啟用壓縮，增加腳本
"scripts": {
"dev": "webpack --mode=development",
"build": "webpack"
},
2. webpack打包樣式
index.css
* { margin: 0; padding: 0;}
body {
background-color: red;
}
index.js
import './index.css'
console.log('webpack learning')
- 要打包樣式需要用到
style-loader和css-loader
cnpm i style-loader css-loader -D- 配置
webpack的module節(jié)點(diǎn)
const path = require('path')
module.exports = {
entry: {
main: './src/index.js'
},
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{ test: /\.css$/, use: ['style-loader','css-loader']}
]
}
}
3. html-webpack-plugin插件
cnpm i html-webpack-plugin -D- 配置
webpack
const HtmlWebpackPlugin = require('html-webpack-plugin')
plugins: [
new HtmlWebpackPlugin({
title: 'webpack + react學(xué)習(xí)',
template: 'index.html'
})
]
-
index.html模板文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
</body>
</html>
4. 樣式文件打包到單獨(dú)的文件中
cnpm i mini-css-extract-plugin -D- 配置
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
module: {
rules: [
{ test: /\.css$/, use: [{
loader: MiniCssExtractPlugin.loader
},'css-loader']}
]
},
plugins: [
new HtmlWebpackPlugin({
title: 'webpack + react學(xué)習(xí)',
template: 'index.html'
}),
new MiniCssExtractPlugin({
filename: '[name].css',
chunkFilename: '[id].css', // 這里的id就是 entry 對(duì)象的 main
ignoreOrder: false, // Enable to remove warnings about conflicting order
})
]
5. 區(qū)別開(kāi)發(fā)環(huán)境和生產(chǎn)環(huán)境
cnpm i cross-env -D- 改寫(xiě)
package.json的執(zhí)行腳本
"scripts": {
"dev": "cross-env NODE_ENV=development webpack --mode=development",
"build": "cross-env NODE_ENV=production webpack"
},
- 改寫(xiě)
mini-css-extract-plugin的配置在開(kāi)發(fā)環(huán)境下啟用hmr(hot module replacement)
const devMode = process.env.NODE_ENV !== 'production'
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
module: {
rules: [
{ test: /\.css$/, use: [{
loader: MiniCssExtractPlugin.loader,
options: {
hmr: process.env.NODE_ENV === 'development'
}
},'css-loader']}
]
},
plugins: [
new HtmlWebpackPlugin({
title: 'webpack + react學(xué)習(xí)',
template: 'index.html'
}),
new MiniCssExtractPlugin({
filename: devMode ? '[name].css' : '[name].[hash].css',
chunkFilename: devMode ? '[id].css' : '[id].[hash].css', // 這里的id就是 entry 對(duì)象的 main,此選項(xiàng)決定了非入口(non-entry) chunk 文件的名稱(chēng)勺远。
ignoreOrder: false, // Enable to remove warnings about conflicting order
})
]
6. webpack-dev-server
cnpm i webpack-dev-server -D-
webpack.config.js配置文件增加devServer配置節(jié)
devServer: {
contentBase: './dist',
// host: '0.0.0.0',
port: 3000,
open: true
},
- 修改
package.json中的啟動(dòng)腳本
"scripts": {
"dev": "cross-env NODE_ENV=development webpack-dev-server --mode=development",
"build": "cross-env NODE_ENV=production webpack"
},
7. 熱模塊替換
- 首先在
devServer配置節(jié)啟用熱模塊替換
const webpack = require('webpack')
devServer: {
contentBase: './dist',
// host: '0.0.0.0',
port: 3000,
hot: true, // 啟用熱模塊替換
open: true
},
plugins: [
new webpack.NamedModulesPlugin(),
new webpack.HotModuleReplacementPlugin()
]
- 將
css的打包修改成開(kāi)發(fā)時(shí)使用style-loader, 生產(chǎn)環(huán)境使用mini-css-extract-plugin
module: {
rules: [
{ test: /\.css$/, use: [
devMode ? 'style-loader' :
{
loader: MiniCssExtractPlugin.loader,
options: {
hmr: process.env.NODE_ENV === 'development'
}
},'css-loader']}
]
},
8. webpack的devtool
可以參考： https://segmentfault.com/a/1190000008315937
- 開(kāi)發(fā)環(huán)境下一般配置成：
devtool: 'cheap-module-source-map', - 啟用
css-loader的sourceMap
module: {
rules: [
{ test: /\.css$/, use: [
devMode ? 'style-loader' :
{
loader: MiniCssExtractPlugin.loader,
options: {
hmr: process.env.NODE_ENV === 'development'
}
}, {
loader: 'css-loader',
options: { sourceMap: true }
}]}
]
},
- 幾個(gè)關(guān)鍵字意義
- eval： 使用eval包裹模塊代碼
- source-map： 產(chǎn)生.map文件
- cheap： 不包含列信息（關(guān)于列信息的解釋下面會(huì)有詳細(xì)介紹)也不包含loader的sourcemap
- module： 包含loader的sourcemap（比如jsx to js 首尼，babel的sourcemap）
- inline： 將.map作為DataURI嵌入，不單獨(dú)生成.map文件（這個(gè)配置項(xiàng)比較少見(jiàn)）
9. 給樣式加瀏覽器廠商前綴
- 安裝
cnpm i postcss-loader autoprefixer -D - 配置
module: {
rules: [
{ test: /\.css$/, use: [
devMode ? 'style-loader' :
{
loader: MiniCssExtractPlugin.loader,
options: {
hmr: process.env.NODE_ENV === 'development'
}
}, {
loader: 'css-loader',
options: { sourceMap: true, importLoaders: 1 }
}, "postcss-loader"]}
]
},
注意上面的css-loader增加了importLoaders: 1選項(xiàng)陆爽，該選項(xiàng)表示的是在交給css-loader處理前的 處理loader數(shù)量什往，默認(rèn)值是0,上面配置了postcss-loader，所以改成1
- 添加 postcss.config.js
module.exports = {
plugins: [
require('autoprefixer')
]
}
10. 清理dist目錄
cnpm i clean-webpack-plugin -D- 使用
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
plugins: [
new CleanWebpackPlugin(),
...
]
11. 處理圖片資源
cnpm i file-loader url-loader -D- 配置
webconfig.js
module: {
rules: [
{ test: /\.css$/, use: [
devMode ? 'style-loader' :
{
loader: MiniCssExtractPlugin.loader,
options: {
hmr: process.env.NODE_ENV === 'development',
publicPath: '../'
}
}, {
loader: 'css-loader',
options: { sourceMap: true, importLoaders: 1 }
}, "postcss-loader"]
},
{
test: /\.(png|jpg|gif)$/i,
use: [
{
loader: 'url-loader',
options: {
limit: 1024 * 500, // 500KB以下會(huì)被轉(zhuǎn)成base64
name: 'images/[name].[hash:8].[ext]',
},
},
],
},
]
},
plugins: [
new MiniCssExtractPlugin({
filename: devMode ? 'css/[name].css' : 'css/[name].[hash].css',
chunkFilename: devMode ? 'css/[id].css' : 'css/[id].[hash].css', // 這里的id就是 entry 對(duì)象的 main,此選項(xiàng)決定了非入口(non-entry) chunk 文件的名稱(chēng)慌闭。
ignoreOrder: false, // Enable to remove warnings about conflicting order
})
]
上面有個(gè)路徑問(wèn)題需要特別注意
-
MiniCssExtractPlugin的filename增加了css/,也就是將提取的css都放到 css目錄 - 圖片資源放置到
images目錄恶守，所以url-loader也給name增加了images/ - 因?yàn)闃邮蕉急环诺搅?code>css目錄，要相應(yīng)的給
MiniCssExtractPlugin.loader增加publicPath: '../'
12. 字體文件
cnpm i file-loader -D- 配置
module: {
rules: [
{
test: /\.(woff|woff2|eot|ttf|otf)$/i,
use: [
{
loader: 'file-loader',
options: {
name: 'fonts/[name].[hash:8].[ext]'
}
}
]
}
]
}
13. 使用babel
cnpm install -D babel-loader @babel/core @babel/preset-env- 根目錄下增加
babel的配置文件.babelrc
{
"presets": ["@babel/preset-env"]
}
- 修改
webpack.config.js啟用babel-loader
output: {
filename: 'js/bundle.js', // 將js都保存到j(luò)s目錄
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{ test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" }
]
}
14. 完整的webpack.config.js
webpack.config.js
const path = require('path')
const devMode = process.env.NODE_ENV !== 'production'
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const webpack = require('webpack')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
module.exports = {
entry: {
main: './src/index.js'
},
output: {
filename: 'js/bundle.js', // 將js都保存到j(luò)s目錄
path: path.resolve(__dirname, 'dist')
},
devtool: 'cheap-module-source-map',
devServer: {
contentBase: './dist',
// host: '0.0.0.0',
port: 3000,
hot: true, // 啟用熱模塊替換
open: true
},
module: {
rules: [
{ test: /\.css$/, use: [
devMode ? 'style-loader' :
{
loader: MiniCssExtractPlugin.loader,
options: {
hmr: process.env.NODE_ENV === 'development',
publicPath: '../'
}
}, {
loader: 'css-loader',
options: { sourceMap: true, importLoaders: 1 }
}, "postcss-loader"]
},
{
test: /\.(png|jpg|gif)$/i,
use: [
{
loader: 'url-loader',
options: {
limit: 1024 * 500, // 500KB以下會(huì)被轉(zhuǎn)成base64
name: 'images/[name].[hash:8].[ext]',
},
},
],
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/i,
use: [
{
loader: 'file-loader',
options: {
name: 'fonts/[name].[hash:8].[ext]'
}
}
]
},
{ test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" }
]
},
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
title: 'webpack + react學(xué)習(xí)',
template: 'index.html'
}),
new MiniCssExtractPlugin({
filename: devMode ? 'css/[name].css' : 'css/[name].[hash].css',
chunkFilename: devMode ? 'css/[id].css' : 'css/[id].[hash].css', // 這里的id就是 entry 對(duì)象的 main,此選項(xiàng)決定了非入口(non-entry) chunk 文件的名稱(chēng)贡必。
ignoreOrder: false, // Enable to remove warnings about conflicting order
}),
new webpack.NamedModulesPlugin(),
new webpack.HotModuleReplacementPlugin()
]
}
-
package.json中的腳本
"scripts": {
"dev": "cross-env NODE_ENV=development webpack-dev-server --mode=development",
"devTest": "cross-env NODE_ENV=development webpack --mode=development",
"build": "cross-env NODE_ENV=production webpack"
},
15. 將開(kāi)發(fā)和生產(chǎn)環(huán)境的公共配置抽離出來(lái)
因?yàn)殚_(kāi)發(fā)和生產(chǎn)的配置有些是共用的配置兔港，有些是不同的配置， 如: 開(kāi)發(fā)時(shí)使用style-loader方便hmr,不需要mini-css-extract-plugin,有devServer配置
而生產(chǎn)環(huán)境是不需要熱模塊替換的(hot module replacement)
- 建立
build文件夾 cnpm i webpack-merge -Dbuild/webpack.common.js
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
module.exports = {
entry: {
main: path.resolve(__dirname, '../src/index.js')
},
output: {
filename: 'js/bundle.js', // 將js都保存到j(luò)s目錄
path: path.resolve(__dirname, '../dist')
},
module: {
rules: [
{
test: /\.(png|jpg|gif)$/i,
use: [
{
loader: 'url-loader',
options: {
limit: 1024 * 500, // 500KB以下會(huì)被轉(zhuǎn)成base64
name: 'images/[name].[hash:8].[ext]',
},
},
],
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/i,
use: [
{
loader: 'file-loader',
options: {
name: 'fonts/[name].[hash:8].[ext]'
}
}
]
},
{ test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" }
]
},
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
title: 'webpack + react學(xué)習(xí)',
template: 'index.html'
})
]
}
build/webpack.dev.js
const merge = require('webpack-merge')
const webpack = require('webpack')
const common = require('./webpack.common')
module.exports = merge(common, {
mode: 'development',
devtool: 'cheap-module-source-map',
devServer: {
contentBase: '../dist',
// host: '0.0.0.0',
port: 3000,
hot: true, // 啟用熱模塊替換
open: true
},
module: {
rules: [
{ test: /\.css$/, use: [
'style-loader',
{
loader: 'css-loader',
options: { sourceMap: true, importLoaders: 1 }
},
'postcss-loader']
},
]
},
plugins: [
new webpack.NamedModulesPlugin(),
new webpack.HotModuleReplacementPlugin()
]
})
build/webpack.prod.js
const merge = require('webpack-merge')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const common = require('./webpack.common')
module.exports = merge(common, {
mode: 'production',
devtool: 'source-map',
module: {
rules: [
{ test: /\.css$/, use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
publicPath: '../'
}
},
{
loader: 'css-loader',
options: { sourceMap: true, importLoaders: 1 }
},
'postcss-loader']
},
]
},
plugins: [
new MiniCssExtractPlugin({
filename: 'css/[name].[hash].css',
chunkFilename: 'css/[id].[hash].css', // 這里的id就是 entry 對(duì)象的 main,此選項(xiàng)決定了非入口(non-entry) chunk 文件的名稱(chēng)仔拟。
ignoreOrder: false, // Enable to remove warnings about conflicting order
})
]
})
- 最后修改
package.json中的腳本
"scripts": {
"dev": "cross-env NODE_ENV=development webpack-dev-server --config build/webpack.dev.js",
"devTest": "cross-env NODE_ENV=development webpack --config build/webpack.dev.js",
"build": "cross-env NODE_ENV=production webpack --config build/webpack.prod.js"
},
遺留配置：
- 使用 scss衫樊、stylus等css預(yù)處理器
- treeshaking 配置
- 公共模塊的打包配置 （多頁(yè)面需要重點(diǎn)考慮，使用默認(rèn)也可以）
