?

?

這里寫目錄標題

• • 1、webpack 初體驗
    • • 全局安裝webpack
  • 2.打包樣式資源
    • • 創(chuàng)建webpack.config.js文件（配置文件）
  • 3.打包html資源
    • • webpack.config.js文件（配置文件）
  • 4.打包圖片資源
    • • webpack.config.js文件（配置文件）
  • 5.打包其他資源
    • • webpack.config.js文件（配置文件）
  • 6.devServer
    • • webpack.config.js文件（配置文件）
  • 7.提取css成單獨文件
    • • webpack.config.js文件（配置文件）
  • 8.css兼容
    • • package.json增加
      • webpack.config.js文件（配置文件）
  • 9.css壓縮
  • 10.eslint 語法檢查
  • 11.js，html壓縮只要將mode改為production就會自動壓縮
  • 12.開發(fā)性能提升：HMR:熱模塊替換
  • 13.開發(fā)性能提升：source-map
  • 13.生產性能提升：tree-shaking（去除沒用到的代碼）

?

1、webpack 初體驗

全局安裝webpack

npm i webpack webpack-cli -g /*index.js:webpack 入口起點文件1.運行指令：開發(fā)環(huán)境：webpack ./src/index.js -o ./build/built.js --mode=developmentwebpack會以 ./src/index.js 為入口文件開始打包，打包后輸出到 ./build/built.js生產環(huán)境：webpack ./src/index.js -o ./build/built.js --mode=productionwebpack會以 ./src/index.js 為入口文件開始打包，打包后輸出到 ./build/built.js2.結論：1.webpack能處理js/json資源，不能處理css/img等其他資源2.生產環(huán)境比開發(fā)環(huán)境多壓縮一個js文件*/ function add(x,y) {return x+y; } add(1,2)

執(zhí)行打包 這個文件，打包成功

總結： index.js:webpack 入口起點文件

1.運行指令：
開發(fā)環(huán)境：webpack ./src/index.js -o ./build/built.js --mode=development
webpack會以 ./src/index.js 為入口文件開始打包，打包后輸出到 ./build/built.js
生產環(huán)境：webpack ./src/index.js -o ./build/built.js --mode=production
webpack會以 ./src/index.js 為入口文件開始打包，打包后輸出到 ./build/built.js
2.結論：
1.webpack能處理js/json資源，不能處理css/img等其他資源
2.生產環(huán)境比開發(fā)環(huán)境多壓縮一個js文件

2.打包樣式資源

創(chuàng)建webpack.config.js文件（配置文件）

use 數(shù)組中順序執(zhí)行：從右到左，從上到下

const {resolve} = require('path');module.exports = {// 入口entry:'./src/index.js',// 輸出output:{// 輸出文件名filename:'built.js',//輸出路徑path:resolve(__dirname,'build')},// loader的配置module:{rules:[{//匹配哪些文件test:/\.less/,//使用哪些loader進行處理use:['style-loader','css-loader',]},{//匹配哪些文件test:/\.css/,//使用哪些loader進行處理use:['style-loader','css-loader','less-loader']},]},// 模式mode:'development' }

3.打包html資源

webpack.config.js文件（配置文件）

plugin 1.下載，2.引入，3.使用

const {resolve} = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin') module.exports = {// 入口entry:'./src/index.js',// 輸出output:{// 輸出文件名filename:'built.js',//輸出路徑path:resolve(__dirname,'build')},plugins:[new HtmlWebpackPlugin({// 復制一個html文件，并引入template:'./src/index.html'})],// 模式mode:'development' }

4.打包圖片資源

webpack.config.js文件（配置文件）

需要url-loader 和html-loader

const {resolve} = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin') module.exports = {// 入口entry:'./src/index.js',// 輸出output:{// 輸出文件名filename:'built.js',//輸出路徑path:resolve(__dirname,'build')},// loader的配置module:{rules:[{//匹配哪些文件test:/\.less/,//使用哪些loader進行處理use:['style-loader','css-loader',]},{//匹配哪些文件test:/\.css/,//使用哪些loader進行處理use:['style-loader','css-loader','less-loader']},{// 處理圖片資源,但是處理不了html中img的路徑問題test: /\.(jpg|png|gif)$/,loader:'url-loader',options:{limit: 8* 1024,// 關閉es6esModule:false,name:'[hash:10].[ext]' //不重復名字},},{// 處理html中的imgtest: /\.html$/,loader:'html-loader'}]},plugins:[new HtmlWebpackPlugin({// 復制一個html文件，并引入template:'./src/index.html'})],// 模式mode:'development' }

5.打包其他資源

webpack.config.js文件（配置文件）

主要用到 file-loader

const {resolve} = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin') module.exports = {// 入口entry:'./src/index.js',// 輸出output:{// 輸出文件名filename:'built.js',//輸出路徑path:resolve(__dirname,'build')},// loader的配置module:{rules:[{//匹配哪些文件test:/\.less/,//使用哪些loader進行處理use:['style-loader','css-loader',]},{//匹配哪些文件test:/\.css/,//使用哪些loader進行處理use:['style-loader','css-loader','less-loader']},{// 處理圖片資源,但是處理不了html中img的路徑問題test: /\.(jpg|png|gif)$/,loader:'url-loader',options:{limit: 8* 1024,// 關閉es6esModule:false,name:'[hash:10].[ext]' //不重復名字},},{// 處理html中的imgtest: /\.html$/,loader:'html-loader'},{// 打包其他資源exclude: /\.(css|js|html)$/,loader: 'file-loader'}]},plugins:[new HtmlWebpackPlugin({// 復制一個html文件，并引入template:'./src/index.html'})],// 模式mode:'development' }

6.devServer

// 自動打包運行 // 指令：npx webpack-dev-server

webpack.config.js文件（配置文件）

const {resolve} = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin') module.exports = {// 入口entry:'./src/index.js',// 輸出output:{// 輸出文件名filename:'built.js',//輸出路徑path:resolve(__dirname,'build')},// loader的配置module:{rules:[{//匹配哪些文件test:/\.css/,//使用哪些loader進行處理use:['style-loader','css-loader','less-loader']},{// 處理html中的imgtest: /\.html$/,loader:'html-loader'}]},plugins:[new HtmlWebpackPlugin({// 復制一個html文件，并引入template:'./src/index.html'})],// 自動打包運行// 指令：npx webpack-dev-serverdevServer: {contentBase: resolve(__dirname,'build'),compress:true,port:3000,open:true},// 模式mode:'development' }

7.提取css成單獨文件

用到mini-css-extract-plugin插件
并且將style-loader 改為 MiniCssExtractPlugin.loader,

webpack.config.js文件（配置文件）

const {resolve} = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin') const MiniCssExtractPlugin = require('mini-css-extract-plugin') module.exports = {// 入口entry:'./src/index.js',// 輸出output:{// 輸出文件名filename:'built.js',//輸出路徑path:resolve(__dirname,'build')},// loader的配置module:{rules:[{//匹配哪些文件test:/\.css/,//使用哪些loader進行處理use:[MiniCssExtractPlugin.loader,'css-loader',]},{// 處理html中的imgtest: /\.html$/,loader:'html-loader'}]},plugins:[new HtmlWebpackPlugin({// 復制一個html文件，并引入template:'./src/index.html'}),new MiniCssExtractPlugin()],// 自動打包運行// 指令：npx webpack-dev-serverdevServer: {contentBase: resolve(__dirname,'build'),compress:true,port:3000,open:true},// 模式mode:'development' }

8.css兼容

package.json增加

webpack.config.js文件（配置文件）

const {resolve} = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin') const MiniCssExtractPlugin = require('mini-css-extract-plugin')// 設置nodejs環(huán)境變量 // process.env.NODE_ENV = "development" module.exports = {// 入口entry:'./src/index.js',// 輸出output:{// 輸出文件名filename:'built.js',//輸出路徑path:resolve(__dirname,'build')},// loader的配置module:{rules:[{//匹配哪些文件test:/\.css/,//使用哪些loader進行處理use:[MiniCssExtractPlugin.loader,'css-loader',{loader: "postcss-loader",options:{ident:'postcss',plugins:()=>{require('postcss-preset-env')()}}}]},{// 處理html中的imgtest: /\.html$/,loader:'html-loader'}]},plugins:[new HtmlWebpackPlugin({// 復制一個html文件，并引入template:'./src/index.html'}),new MiniCssExtractPlugin()],// 自動打包運行// 指令：npx webpack-dev-serverdevServer: {contentBase: resolve(__dirname,'build'),compress:true,port:3000,open:true},// 模式mode:'development' }

9.css壓縮

const MiniCssExtractPlugin = require(‘mini-css-extract-plugin’)

const {resolve} = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin') const MiniCssExtractPlugin = require('mini-css-extract-plugin') const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin') // 設置nodejs環(huán)境變量 // process.env.NODE_ENV = "development" module.exports = {// 入口entry:'./src/index.js',// 輸出output:{// 輸出文件名filename:'built.js',//輸出路徑path:resolve(__dirname,'build')},// loader的配置module:{rules:[{//匹配哪些文件test:/\.css/,//使用哪些loader進行處理use:[MiniCssExtractPlugin.loader,'css-loader',{loader: "postcss-loader",options:{ident:'postcss',plugins:()=>{require('postcss-preset-env')()}}}]},{// 處理html中的imgtest: /\.html$/,loader:'html-loader'}]},plugins:[new HtmlWebpackPlugin({// 復制一個html文件，并引入template:'./src/index.html'}),new MiniCssExtractPlugin(),new OptimizeCssAssetsWebpackPlugin()],// 自動打包運行// 指令：npx webpack-dev-serverdevServer: {contentBase: resolve(__dirname,'build'),compress:true,port:3000,open:true},// 模式mode:'development' }

10.eslint 語法檢查

注意：不檢查第三方 node_module

npm i eslint eslint-loader eslint-config-airbnb-base eslint-plugin-import

"eslintConfig": {"extends": "airbnb-base"} const {resolve} = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin') const MiniCssExtractPlugin = require('mini-css-extract-plugin') const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin') // 設置nodejs環(huán)境變量 // process.env.NODE_ENV = "development" module.exports = {// 入口entry:'./src/index.js',// 輸出output:{// 輸出文件名filename:'built.js',//輸出路徑path:resolve(__dirname,'build')},// loader的配置module:{rules:[{//匹配哪些文件test:/\.css/,//使用哪些loader進行處理use:[MiniCssExtractPlugin.loader,'css-loader',{loader: "postcss-loader",options:{ident:'postcss',plugins:()=>{require('postcss-preset-env')()}}}]},{// 處理html中的imgtest: /\.html$/,loader:'html-loader'},// {// test:/\.js$/,// exclude:/node_modules/,// loader:'eslint-loader',// options:{// fix:true// }// }]},plugins:[new HtmlWebpackPlugin({// 復制一個html文件，并引入template:'./src/index.html'}),new MiniCssExtractPlugin(),new OptimizeCssAssetsWebpackPlugin()],// 自動打包運行// 指令：npx webpack-dev-serverdevServer: {contentBase: resolve(__dirname,'build'),compress:true,port:3000,open:true},// 模式mode:'development' }

11.js，html壓縮只要將mode改為production就會自動壓縮

12.開發(fā)性能提升：HMR:熱模塊替換

在devServer中啟動hot：true，
css默認啟動hmr因為style-loader內部啟動了
js：需要在js中添加

if (module.hot){module.hot.accept('./print.js',function () {print();}) }

13.開發(fā)性能提升：source-map

方便找出開發(fā)中的錯誤

devtool: "source-map", const {resolve} = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin') const MiniCssExtractPlugin = require('mini-css-extract-plugin') const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin') // 設置nodejs環(huán)境變量 // process.env.NODE_ENV = "development" module.exports = {// 入口entry:'./src/index.js',// 輸出output:{// 輸出文件名filename:'built.js',//輸出路徑path:resolve(__dirname,'build')},// loader的配置module:{rules:[{//匹配哪些文件test:/\.css/,//使用哪些loader進行處理use:[MiniCssExtractPlugin.loader,'css-loader',{loader: "postcss-loader",options:{ident:'postcss',plugins:()=>{require('postcss-preset-env')()}}}]},{// 處理html中的imgtest: /\.html$/,loader:'html-loader'}]},plugins:[new HtmlWebpackPlugin({// 復制一個html文件，并引入template:'./src/index.html'}),new MiniCssExtractPlugin(),new OptimizeCssAssetsWebpackPlugin()],// 自動打包運行// 指令：npx webpack-dev-serverdevServer: {contentBase: resolve(__dirname,'build'),compress:true,port:3000,open:true},devtool: "source-map",// 模式mode:'development' }

13.生產性能提升：tree-shaking（去除沒用到的代碼）

1.必須es6模塊化，2.開啟生產環(huán)境
在package.json中配置

"sideEffects":["*.css"]

---------------------
作者：培歌行
來源：CSDN
原文：https://blog.csdn.net/weixin_43964148/article/details/105313149
版權聲明：本文為作者原創(chuàng)文章，轉載請附上博文鏈接！
內容解析By：CSDN,CNBLOG博客文章一鍵轉載插件

總結

以上是生活随笔為你收集整理的[转]Webpack5(从入门到精通)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內容還不錯，歡迎將生活随笔推薦給好友。