[TOC]
WebPack
局部
開發(fā)模式安裝
npm install webpack webpack-cli --save-dev
yarn add webpack webpack-cli -D (-D換--save-dev也可以)
使用
./node_modules/.bin/webpack --version
npm 5以后可以
npx webpack --version
npx create-react-app 快速創(chuàng)建react app
全局
npm install webpack -g
yarn global add @vue/cli
可以在page.json 中配置scripts
"scripts": {
build: "webpack"
}
執(zhí)行npm run build
輸入輸出
新建
webpack.config.js文件
const path = require('path')
// console.log(path.resolve())
// console.log(path.join(__dirname,'./dist'))
const config={
entry: './src/index.js', //入口位置
output: {
filename: "bundle.js",
path: path.join(__dirname,'./dist')//出口位置
}
}
module.exports = config
引入node path模塊 打開設(shè)置
引入
增加的目錄為
/Users/zhangzhuang/.nvm/versions/node/v10.16.0/lib/node_modules/npm/node_modules
path.join() 相當(dāng)于拼接
__dirname 該項(xiàng)目的絕對(duì)路徑
path.resolve() 該項(xiàng)目的絕對(duì)路徑
Loaders
js 處理資源文件使用
安裝
yarn add css-loader style-loader -D
webpack.config.js
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader','css-loader','sass-loader']//順序不能換，倒序執(zhí)行
}
]
}
ssas支持
yarn add sass-loader -D
webpack.config.js
rules: [
{
//sass-loader node-sass兩個(gè)依賴都要安裝
test: /\.(scss|sass)$/,
use: ['style-loader','css-loader','sass-loader']
}
]
plugins
支柱功能牧愁，使WebPackage可擴(kuò)展素邪。
yarn add html-webpack-plugin -D
webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin')
const config = {
...
plugins: [
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'template.html'
}
)
]
}
module.exports = config
熱模塊替換
webpack-dev-server配合使用,提供一個(gè)服務(wù)更新瀏覽器。
yarn add webpack-dev-server -D
package.json
"scripts": {
...
"watch": "webpack --watch",
"hot": "webpack-dev-server"
}
webpackage.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin')
const webpack = require('webpack');
...
devServer: {
contentBase: path.join(__dirname, "src"),
compress: true,
port: 9006,
hot: true
},
plugins: [
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'template.html'
}
),
new webpack.NamedModulesPlugin(),
new webpack.HotModuleReplacementPlugin()
]
...
總結(jié)
| 關(guān)鍵詞 | 總結(jié) |
|---|---|
| Loaders | test去匹配文件猪半、loader倒序加載流水線的處理 |
| plugin的使用兔朦、熱模塊的替換 | 在plugins屬性中new一個(gè)plugin |
| webpack-dev-server | 引用HMR插件偷线，修改js的時(shí)候，自動(dòng)刷新頁(yè)面 |
Mode
模式
| 選項(xiàng) | 描述 |
|---|---|
| development | 開發(fā)模式 |
| production | 正式模式 |
webpack.config.js
const config = {
mode: 'production'
....
}
基礎(chǔ)使用 烘绽，根據(jù)mode切host地址
index.js
if (process.env.NODE_ENV === 'development'){
console.log('baseurl is localhost')
} else {
console.log('baseurl is zz.com')
}
兩個(gè)模式生成的bundle.js 是不同的
babel 配置css壓縮
yarn add babel-loader @babel/core @babel/preset-env @babel/plugin-transform-runtime -D
yarn add @babel/runtime -S
.babelrc 只在軟件包中有用
{
"presets": [
"@babel/preset-env"
],
"plugins": [
"@babel/plugin-transform-runtime"
]
}
src/ a.js
export default () =>{
console.log("come from module a")
}
index.js
import afn from './a'
afn()
成功引入
clean-webpack-plugin
清除文件
yarn add clean-webpack-plugin -D
https://github.com/johnagan/clean-webpack-plugin
copy-webpack-plugin
yarn copy-webpack-plugin -D
webpack.config.js
const CopyWebpackPlugin = require ('copy-webpack-plugin')
plugins: [
...
new CopyWebpackPlugin([
{
from: path.join(__dirname,'assets'),
to: 'assets'
}
])
]
css和js壓縮
https://webpack.js.org/plugins/mini-css-extract-plugin/#minimizing-for-production
yarn add terser-webpack-plugin optimize-css-assets-webpack-plugin mini-css-extract-plugin -D
- Terser-webpack-plugin 壓js
- optimize-css-assets-webpack-plugin 壓cs
- mini-css-extract-plugin 支持頭部引用
webpack.config.js
const TerserJSPlugin = require('terser-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
module.exports = {
optimization: {
minimizer: [new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})],
},
plugins: [
new MiniCssExtractPlugin({
filename: '[name].css',
chunkFilename: '[id].css',
}),
],
module: {
rules: [
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, 'css-loader'],
},
],
},
};
