?

?

?

1、webpack 初體驗

全局安裝webpack

npm i webpack webpack-cli -g

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

執行打包 這個文件，打包成功

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

1.運行指令：
開發環境：webpack ./src/index.js -o ./build/built.js --mode=development
webpack會以 ./src/index.js 為入口文件開始打包，打包后輸出到 ./build/built.js
生產環境：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.生產環境比開發環境多壓縮一個js文件

2.打包樣式資源

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

use 數組中順序執行：從右到左，從上到下

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成單獨文件

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環境變量
// 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 {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環境變量
// 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 語法檢查

"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環境變量
// 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.開發性能提升：HMR:熱模塊替換

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

13.開發性能提升：source-map

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環境變量
// 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（去除沒用到的代碼）

  "sideEffects":["*.css"]