webpack5.x基本使用

"webpack": "^5.46.0",

"webpack-cli": "^4.7.2",

下載下傳webpack的插件

npm i -D webpack webpack-cli

指令行

npx webpack
npx webpack --mode development(不寫配置情況下)
npx webpack 需要打包的檔案 -o 打包的檔案位置與名稱 --mode development(不寫配置情況下)

打包html

html-webpack-plugin

// 打包壓縮html（打包多個就執行個體化new多個）
    new htmlWebpackPlugin({
        template:'./src/index.html', //打包的檔案
        filename:'demo.html',     //打包後的名稱
        chunks:[],               //指定使用的js檔案
        minify:{                  //壓縮
            // 移除空格
            collapseWhitespace:true,
            // 移除注釋
            removeComments:true,
        }
    }),

打包css

npm i -D css-loader style-loader

/* 
        一個用    loader：css-loader
        一個以上  use:[]
        從右往左
    */
    {
        test: /\.css$/,
        use: [
            'style-loader',
            'css-loader']
    }

打包less或者sass

less npm i -D less-loader

{
    test: /\.less$/,
    use: [
        'style-loader',
        'css-loader',
        'less-loader'
    ]
}

sass npm i -D node-sass sass-loader

{
    test: /\.sass$/,
    use: [
        'style-loader',
        'css-loader',
        'sass-loader'
    ]
}

提取css為單獨檔案

npm i -D mini-css-extract-plugin
plugin

new miniCssExtractPlugin({filename:'demo.css'})
loader

{

test: /.css$/,

use: [

miniCssExtractPlugin.loader,

'css-loader']

},

css3相容處理(變異成各個浏覽器支援的---字首--)

npm i -D postcss-loader postcss-preset-env

package.json配置相容浏覽器

"browserslist": [
    ">0.2%",
    "last 2 version",
    "not dead"
  ]

建立檔案postcss.config.js

module.exports={
    plugins:[
     require('postcss-preset-env')()   
    ]
}

引入loader

{
    test: /\.css$/,
    use: [
        miniCssExtractPlugin.loader,
        'css-loader',
        'postcss-loader'
    ]
},

壓縮css

npm i -D optimize-css-assets-webpack-plugin

new optimizeCssAssetsWebpackPlugin()

webpack打包圖檔資源

npm i -D url-loader file-loader

背景圖打包

{
    test: /\.(png|jpg|jpeg)$/,
    loader: 'url-loader',
    options: {
        publicPath:'./images/',
        outputPath: 'imgs/',
        name:'[name][hasg].[ext]',//命名hash+名稱
        limit:1024*8,//限制8k一下轉base64
    }
}

html圖 html-loader

npm i -D html-loader

{
        test: /\.(html)$/,
        loader: 'html-loader',
    }

其他檔案打包

{
    // exclude 排查資源
    exclude:/\.(js|json|html|css|less|scss|png|jpg)$/,
    loader:'file-loader',
    options:{
        outputPath: 'font/', //打包位置
        publicPath:'./font', //尋找位置
        name:'[name][hasg].[ext]',//命名hash+名稱
    }
}

eslint代碼規範（airbnb）

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

package.json

"eslintConfig":{
      "extends":"airbnb-base"
  }

webpack.config.js

{
    test: /\.js$/,
    //隻檢查自己寫的代碼，不檢查第三方的
    exclude:/node_modules/,
    loader:'eslint-loader'
},

開發伺服器 devServer

npm i -D webpack-dev-server
指令 npx webpack serve

// 在webpack5 需要加上這個選項才會自動重新整理頁面
target:"web"

配置devServer

devServer:{
        port:3001,
        compress:true,//自動更新
        open:true//自動打開浏覽器
    }

環境優化

開發環境

- 打包建構速度
- 優化代碼調試

生産優化（樹搖）

- 代碼運作性能

HMR子產品熱替換

devServer:{
    port:3001,
    compress:true,//自動更新
    open:true,//自動打開浏覽器
    hot:true//HMR子產品熱替換
}

樹搖去掉沒用到的js代碼

tree-shaking webpack自帶

es6 導出
必須是production

css去掉無用的代嗎

npm i -D purgecss-webpack-plugin

new PurgecssWebpackPlugin({
    paths:glob.sync(pattern:`${PATH.src}/**/*`,options:{nodir:true})
})

// 采用commonjs
const path = require('path')
const htmlWebpackPlugin = require('html-webpack-plugin')
const miniCssExtractPlugin = require('mini-css-extract-plugin')
const optimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')
module.exports = {
    mode: 'production',                 //生産:development,開發:production
    /* 
    1、entry:
        1、單入口，字元串表示-----打包一個chunk，生成一個build
            entry:'./src/index.js',
        2、多入口，數組------打包成一個chunk，生成一個build
            entry:['./src/index.js'，'./src/cc.js'],
        3、對象的寫法  -----有幾個檔案生成幾個chunk，生成幾個build
            entry:{
                one:'./src/one.js',
                two:'./src/two.js'
            }
    */
    entry: './src/index.js',
    output: {
        filename: '[name].js',
        // **對象多入口寫法entry： filename:'[name].js',
        path: path.resolve(__dirname, 'dist'),
    },
    // loader  處理非js資源   如html，css，img
    module: {
        rules: [
            /* 
                一個用    loader：css-loader
                一個以上  use:[]
                從右往左
                 {
                    test: /\.css$/,
                    use: [
                        'style-loader',
                        'css-loader']
                },
            */

            {
                test: /\.css$/,
                use: [
                    miniCssExtractPlugin.loader,
                    'css-loader',
                    'postcss-loader'
                ]
            },
            {
                test: /\.less$/,
                use: [
                    'style-loader',
                    'css-loader',
                    'less-loader'
                ]
            },
            {
                test: /\.sass$/,
                use: [
                    'style-loader',
                    'css-loader',
                    'sass-loader'
                ]
            },
            {
                test: /\.(png|jpg|jpeg)$/,
                loader: 'url-loader',
                options: {
                    publicPath:'./images/',
                    outputPath: 'imgs/',
                    name:'[name][hasg].[ext]',//命名hash+名稱
                    limit:1024*8,//限制8k一下轉base64
                }
            },
            {
                test: /\.(html)$/,
                loader: 'html-loader',
            },
            {
                // exclude 排查資源
                exclude:/\.(js|json|html|css|less|scss|png|jpg)$/,
                loader:'file-loader',
                options:{
                    outputPath: 'font/', //大包位置
                    publicPath:'./font', //尋找位置
                    name:'[name][hasg].[ext]',//命名hash+名稱
                   
                }
            },
            // eslint 隻檢查js
            {
                test: /\.js$/,
               //隻檢查自己寫的代碼，不檢查第三方的
               exclude:/node_modules/,
               loader:'eslint-loader',
               options:{
                   fix:true,//自動修複
               }
            },
        ]
    },
    // plugin插件，執行範圍更廣的任務  打包到開發壓縮
    plugins: [
        // 打包壓縮html（打包多個就執行個體化new多個）
        new htmlWebpackPlugin({
            template: './src/index.html', //打包的檔案
            filename: 'demo.html',     //打包後的名稱
            chunks: [],               //指定使用的js檔案
            minify: {                  //壓縮
                // 移除空格
                collapseWhitespace: true,
                // 移除注釋
                removeComments: true,
            }
        }),
        new miniCssExtractPlugin({ filename: 'demo.css' }),
        new optimizeCssAssetsWebpackPlugin()
    ],
    // 在webpack5 需要加上這個選項才會自動重新整理頁面
    target:"web",

    devServer:{
        port:3001,
        compress:true,//自動更新
        open:true,//自動打開浏覽器
        hot:true//HMR子產品熱替換
    }
}

module.exports={
    plugins:[
     require('postcss-preset-env')()   
    ]
}

{
  "name": "webpack5s",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev":"webpack serve --mode development --port 3000",
    "build":"webpack --mode production"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^6.2.0",
    "eslint": "^7.31.0",
    "eslint-config-airbnb-base": "^14.2.1",
    "eslint-loader": "^4.0.2",
    "eslint-plugin-import": "^2.23.4",
    "file-loader": "^6.2.0",
    "html-loader": "^2.1.2",
    "html-webpack-plugin": "^5.3.2",
    "less": "^4.1.1",
    "less-loader": "^10.0.1",
    "mini-css-extract-plugin": "^2.1.0",
    "optimize-css-assets-webpack-plugin": "^6.0.1",
    "post-loader": "^2.0.0",
    "postcss-loader": "^6.1.1",
    "postcss-preset-env": "^6.7.0",
    "style-loader": "^3.2.1",
    "url-loader": "^4.1.1",
    "webpack": "^5.46.0",
    "webpack-cli": "^4.7.2",
    "webpack-dev-server": "^3.11.2"
  },
  "browserslist": [
    ">0.2%",
    "last 2 version",
    "not dead"
  ],
  "eslintConfig": {
    "extends": "airbnb-base"
  }
}

webpack5.x基本使用

開發環境

生産優化（樹搖）

HMR子產品熱替換

繼續閱讀

為什麼把CSS放頭部，script放下面

關于 underscore 中模闆引擎的應用示範樣例

underscore 模闆标簽修改。

Ajax——模闆引擎

使用underscore的template自定義模闆

underscore模闆功能的使用和學習

CSS之折疊菜單

web開發之前後端渲染

DOM下元素 offset client scroll 相關屬性簡介

[HTML5]自定義屬性 data-* 和 jQuery.data 詳解

七牛雲-C#SDK-上傳-前期準備

IE8 CSS設定DIV居中，添加“margin:0 auto”

403 Forbidden，You don't have permission to access / on this server.Forbidden

vue-cli簡介（中文翻譯）

Ajax發送和擷取json資料到Spring mvc 1.spring mvc後端2.web前段

JSONObject包導入異常 java.lang.NoClassDefFoundErrorweb項目的導入包的問題