webpack4溫習總結

時間  2020-07-07
標籤 webpack4 webpack 溫習 總結 简体版
原文   原文鏈接

webpack是一個模塊打包器，能夠根據入口文件，隨着依賴關係將全部文件打包成js文件。css

首先須要node環境，百度一下本身安裝html

webpack官網地址：https://www.webpackjs.comvue

首先，創建一個文件，叫webpack1（不能叫webpack，不然初始化報錯）node

初始化：jquery

npm init -y

初始化以後，文件夾中會出現一個package.json文件webpack

以後安裝webpackes6

npm i -D webpack

webpack4還須要安裝一個webpack-cliweb

npm i -D webpack-cli

以後在根目錄下建立一個src文件夾，裏面放的是源碼，裏面放一個index.js，是入口文件；npm

在根目錄建一個dist文件，用來盛放打包後的文件，dist文件夾中再放一個index.html文件；json

再在跟目錄下建立一個webpack.config.js文件，當作webpack的配置文件

在src/index.js中隨便寫點代碼：

import _ from 'lodash';
import "./style/index.css";//loader=>css-loader module style-loader
import "./style/a.scss";
function createDomElement(){
    let dom = document.createElement('div');
    dom.innerHTML=_.join(["aicoder.com","好!","線下實習"],"");
    // dom.className="box";
    dom.classList.add("box");
    return dom;
}

let divDom = createDomElement();

document.body.appendChild(divDom);

在webpack.config.js中做出簡單配置：

const path = require("path");
module.exports={
    entry:"./src/index.js",//入口文件
    mode:"development",//模式是開發環境
    output:{//出口文件時main.js，打包到當前目錄的dist文件夾下
        filename:"main.js",
        path:path.resolve(__dirname,"dist")
    },
    module: {
        rules: [
            { //告訴webpack，當import,require遇到.css文件時,用css-loader、style-loader處理一下
                test: /\.(sc|c|sa)ss$/,//scss,css,sass
                use: ["style-loader","css-loader","sass-loader"],//loader的使用數據是從右向左的
            }
        ]
    }
}

在dist/index.html中引入打包生成的main.js

<!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>Document</title>
</head>
<body>
    <script src="./main.js"></script>
</body>
</html>

固然咱們還在src/style/中加了index.css和a.sass文件，

若是想讓webpack打包js以外的文件，須要安裝對應的loader

css須要css-loader(用來解析css文件)、style-loader(用來將打包好的css文件用style標籤引入)

scss文件須要 sass-loader 和 node-sass

一口氣安裝了：

npm i -D css-loader style-loader sass-loader node-sass

以後執行npx webpack

dist文件中就會出現打包好的main.js

而後就能夠打開dist/index.html看一下效果。

若是咱們想執行本身的自定義命令來讓webpack打包，咱們能夠在package.json的script中配置一下命令，如：

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build":"npx webpack -c webpack.config.js"
  },

以後咱們執行 npm run build就可讓webpack打包了

上面的-c webpack.config.js指的是 webpack是根據哪一個文件的配置打包的

----------------------------------------------------------------------------------------------------------------------------

因爲webpack是將全部的依賴文件打包成一個文件，當咱們想調試css樣式時，咱們很難在控制檯看到某一句代碼是來自哪一個源文件的，因此咱們須要開啓sourceMap，

 在webpack.config.js中國這樣配置：

module: {
        rules: [
            { 
                test: /\.(sc|c|sa)ss$/,//scss,css,sass
                use: ["style-loader",{ loader:"css-loader",
                        options:{
                            sourceMap:true
                        }
                },{
                    loader:"sass-loader",
                    options:{
                        sourceMap:true } }],
            }
        ]
    }

而後執行npm run build 在控制檯查看css樣式，就能夠清晰的看到某個樣式，是來自哪個文件（index.css仍是a.scss一目瞭然）

------------------------------------------------------------------------------------------------------------

另外咱們通常還會用到postcss  以及  autuoprefixer 

postcss 能夠對css進行預處理   校驗css   以及自動添加前綴   能夠提早使用css的一些新特性

首先安裝   (咱們此處只用了 自動添加前綴的插件  因此額外安裝了autoprefixer)

npm i -D postcss-loader
npm install --save-dev autoprefixer

 在webpack.config.js中添加對應配置：

module: {
        rules: [
            { 
                test: /\.(sc|c|sa)ss$/,//scss,css,sass
                use: ["style-loader",{
                        loader:"css-loader",
                        options:{
                            sourceMap:true
                        }
                },{ loader:"postcss-loader", options:{ ident:"postcss",//惟一標識，建議使用postcss
                        sourceMap:true, plugins:(loader)=>[ require("autoprefixer")({overrideBrowserslist:["> 0.15% in CN"]}),//瀏覽器 份額大於0.15% 在中國 (已經包括IE8了)
 ] } },{ loader:"sass-loader", options:{ sourceMap:true } }], } ] }

 ----------------------------------------------------------------------------------------------------

將css文件單獨抽離出來

npm install --save-dev mini-css-extract-plugin

通常咱們都是在生產環境將css文件單獨抽離出來的，因此咱們在根目錄中建立webpack.product.config.js文件，用來配置生產環境下的webpack配置，將上面的webpack.config.js中的配置複製一份過來，作如下改變：

const path = require("path");
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports={
    entry:"./src/index.js",//入口文件
    mode:"production",//模式是開發環境
    output:{//出口文件時main.js，打包到當前目錄的dist文件夾下
        filename:"main.js",
        path:path.resolve(__dirname,"dist")
    },
    module: {
        rules: [
            { 
                test: /\.(sc|c|sa)ss$/,//scss,css,sass
                use: [
                    MiniCssExtractPlugin.loader,{
                        loader:"css-loader",
                        options:{
                            sourceMap:true
                        }
                },{
                    loader:"postcss-loader",
                    options:{
                        ident:"postcss",//惟一標識，建議使用postcss
                        sourceMap:true,
                        plugins:(loader)=>[
                            require("autoprefixer")({overrideBrowserslist:["> 0.15% in CN"]}),//瀏覽器 份額大於0.15% 在中國 (已經包括IE8了)
                        ]
                    }
                },{
                    loader:"sass-loader",
                    options:{
                        sourceMap:true
                    }
                }],
            }
        ]
    },
    plugins: [ new MiniCssExtractPlugin({
            // Options similar to the same options in webpackOptions.output
            // both options are optional
            filename:'[name].[hash].css',
            chunkFilename:'[id].[hash].css', }) ],
}

 

執行以下命令：

npx webpack --config webpack.product.config.js

就能夠用這個配置文件打包了

 固然，若是咱們須要屢次打包 這樣輸入命令顯得有點複雜，咱們能夠在package.json中的script中增長一個腳本命令：

"dist": "npx webpack --config webpack.product.config.js"

以後，運行npm run dist與上述命令等效

----------------------------------------------------------------------------------------------------------------------------------

css壓縮：（生產環境才能用到）

安裝這個插件

npm install optimize-css-assets-webpack-plugin --save-dev

在webpack.product.config.js配置：

const path = require("path");
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlutin=require('optimize-css-assets-webpack-plugin');
module.exports={
    entry:"./src/index.js",//入口文件
    mode:"production",//模式是開發環境
    output:{//出口文件時main.js，打包到當前目錄的dist文件夾下
        filename:"main.js",
        path:path.resolve(__dirname,"dist")
    },
    module: {
        rules: [
            { 
                test: /\.(sc|c|sa)ss$/,//scss,css,sass
                use: [
                    MiniCssExtractPlugin.loader,{
                        loader:"css-loader",
                        options:{
                            sourceMap:true
                        }
                },{
                    loader:"postcss-loader",
                    options:{
                        ident:"postcss",//惟一標識，建議使用postcss
                        sourceMap:true,
                        plugins:(loader)=>[
                            require("autoprefixer")({overrideBrowserslist:["> 0.15% in CN"]}),//瀏覽器 份額大於0.15% 在中國 (已經包括IE8了)
                        ]
                    }
                },{
                    loader:"sass-loader",
                    options:{
                        sourceMap:true
                    }
                }],
            }
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            // Options similar to the same options in webpackOptions.output
            // both options are optional
            filename:'[name].css',
            chunkFilename:'[id].css',
        })
    ],
    optimization:{ minimizer:[new OptimizeCSSAssetsPlutin({})] }
}

以後執行 npm run dist打包  便可壓縮css代碼

 -------------------------------------------------------------------

js壓縮：（生產環境用）

npm i -D uglifyjs-webpack-plugin

在webpack.product.config.js中加入配置：

const path = require("path");
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlutin=require('optimize-css-assets-webpack-plugin');
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
module.exports={
    entry:"./src/index.js",//入口文件
    mode:"production",//模式是開發環境
    output:{//出口文件時main.js，打包到當前目錄的dist文件夾下
        filename:"main.js",
        path:path.resolve(__dirname,"dist")
    },
    module: {
        rules: [
            { 
                test: /\.(sc|c|sa)ss$/,//scss,css,sass
                use: [
                    MiniCssExtractPlugin.loader,{
                        loader:"css-loader",
                        options:{
                            sourceMap:true
                        }
                },{
                    loader:"postcss-loader",
                    options:{
                        ident:"postcss",//惟一標識，建議使用postcss
                        sourceMap:true,
                        plugins:(loader)=>[
                            require("autoprefixer")({overrideBrowserslist:["> 0.15% in CN"]}),//瀏覽器 份額大於0.15% 在中國 (已經包括IE8了)
                        ]
                    }
                },{
                    loader:"sass-loader",
                    options:{
                        sourceMap:true
                    }
                }],
            },
            // {
            //     test: /\.js$/,
            //     loader: 'babel-loader',
            //     exclude: /node_modules/,
            // }
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            // Options similar to the same options in webpackOptions.output
            // both options are optional
            filename:'[name].css',
            chunkFilename:'[id].css',
        })
    ],
    optimization:{
        minimizer:[
            new UglifyJsPlugin({
                cache: true,
                parallel: true,
                /**
                 *  sourceMap 和 devtool: 'inline-source-map', 衝突
                 */
                sourceMap: false, // set to true if you want JS source maps,
                /**
                 *  extractComments 導出備註
                 */
                extractComments: 'all'
            }),
            new OptimizeCSSAssetsPlutin({})
        ]
    }
    
}

 而後執行npm run dist 就行

----------------------------------------------------------------------------------

將es6轉化轉義成es5

安裝：

npm i -D babel-loader babel-core babel-preset-env

 

在根目錄新建一個.babelrc文件

配置上：

{
"presets": ["@babel/env"]
}

在webpack.product.config.js中配置：

rules: [
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/
            }
        ]

 --------------------------------------------------------------------------

如何將每次打包的js和css文件 自動引入到html文件中：

npm install html-webpack-plugin -D

在config.js中配置：

const path = require("path");
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlutin=require('optimize-css-assets-webpack-plugin');
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports={
    entry:"./src/index.js",//入口文件
    mode:"production",//模式是開發環境
    output:{//出口文件時main.js，打包到當前目錄的dist文件夾下
        filename:"main.[hash].js",
        path:path.resolve(__dirname,"dist")
    },
    module: {
        rules: [
            { 
                test: /\.(sc|c|sa)ss$/,//scss,css,sass
                use: [
                    MiniCssExtractPlugin.loader,{
                        loader:"css-loader",
                        options:{
                            sourceMap:true
                        }
                },{
                    loader:"postcss-loader",
                    options:{
                        ident:"postcss",//惟一標識，建議使用postcss
                        sourceMap:true,
                        plugins:(loader)=>[
                            require("autoprefixer")({overrideBrowserslist:["> 0.15% in CN"]}),//瀏覽器 份額大於0.15% 在中國 (已經包括IE8了)
                        ]
                    }
                },{
                    loader:"sass-loader",
                    options:{
                        sourceMap:true
                    }
                }],
            },
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/
            }
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            // Options similar to the same options in webpackOptions.output
            // both options are optional
            filename:'[name][hash].css',
            chunkFilename:'[id][hash].css',
        }),
        new HtmlWebpackPlugin({
            title:"webpack 溫習",//默認值webpack App
            filename:"main.html",//默認值index.html 是最終生成的文件名字
            template:path.resolve(__dirname,"src/index.html"),
            minify:{
                collapseWhitespace:true,//是否去空白
                removeComments:true,//是否移除註釋
                removeAttributeQuotes:true,//移除屬性的引號
 } })
    ],
    optimization:{
        minimizer:[
            new UglifyJsPlugin({
                cache: true,
                parallel: true,
                /**
                 *  sourceMap 和 devtool: 'inline-source-map', 衝突
                 */
                sourceMap: false, // set to true if you want JS source maps,
                /**
                 *  extractComments 導出備註
                 */
                extractComments: 'all'
            }),
            new OptimizeCSSAssetsPlutin({})
        ]
    }
    
}

固然，須要在src下簡歷一個index.html模板

而後，執行npm run dist 便可

 -----------------------------------------------------------------------

清理dist目錄

每次打包 都會生成一些新的打包文件，從而以前的沒用的打包文件也會保留下來，很不爽，因此咱們須要一個自動清理dist目錄的插件

npm install clean-webpack-plugin --save-dev

在config.js中配置：

const path = require("path");
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlutin=require('optimize-css-assets-webpack-plugin');
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
module.exports={
    entry:"./src/index.js",//入口文件
    mode:"production",//模式是開發環境
    output:{//出口文件時main.js，打包到當前目錄的dist文件夾下
        filename:"main.[hash].js",
        path:path.resolve(__dirname,"dist")
    },
    module: {
        rules: [
            { 
                test: /\.(sc|c|sa)ss$/,//scss,css,sass
                use: [
                    MiniCssExtractPlugin.loader,{
                        loader:"css-loader",
                        options:{
                            sourceMap:true
                        }
                },{
                    loader:"postcss-loader",
                    options:{
                        ident:"postcss",//惟一標識，建議使用postcss
                        sourceMap:true,
                        plugins:(loader)=>[
                            require("autoprefixer")({overrideBrowserslist:["> 0.15% in CN"]}),//瀏覽器 份額大於0.15% 在中國 (已經包括IE8了)
                        ]
                    }
                },{
                    loader:"sass-loader",
                    options:{
                        sourceMap:true
                    }
                }],
            },
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/
            }
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            // Options similar to the same options in webpackOptions.output
            // both options are optional
            filename:'[name][hash].css',
            chunkFilename:'[id][hash].css',
        }),
        new HtmlWebpackPlugin({
            title:"webpack 溫習",//默認值webpack App
            filename:"main.html",//默認值index.html 是最終生成的文件名字
            template:path.resolve(__dirname,"src/index.html"),
            minify:{
                collapseWhitespace:true,//是否去空白
                removeComments:true,//是否移除註釋
                removeAttributeQuotes:true,//移除屬性的引號
            }
        }),
        new CleanWebpackPlugin(),//清理構建文件夾
    ],
    optimization:{
        minimizer:[
            new UglifyJsPlugin({
                cache: true,
                parallel: true,
                /**
                 *  sourceMap 和 devtool: 'inline-source-map', 衝突
                 */
                sourceMap: false, // set to true if you want JS source maps,
                /**
                 *  extractComments 導出備註
                 */
                extractComments: 'all'
            }),
            new OptimizeCSSAssetsPlutin({})
        ]
    }
    
}

而後再次構建，dist目錄會被清理一下再生成打包文件

--------------------------------------------------------------------------------------------------------

 webpack處理圖片

首先 打包時處理不了圖片這種二進制文件的 路徑，咱們須要用一個file-loader插件

安裝：

npm install --save-dev file-loader

在config.js中配置：

const path = require("path");
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlutin=require('optimize-css-assets-webpack-plugin');
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
module.exports={
    entry:"./src/index.js",//入口文件
    mode:"production",//模式是開發環境
    output:{//出口文件時main.js，打包到當前目錄的dist文件夾下
        filename:"main.[hash].js",
        path:path.resolve(__dirname,"dist")
    },
    module: {
        rules: [
            { 
                test: /\.(sc|c|sa)ss$/,//scss,css,sass
                use: [
                    MiniCssExtractPlugin.loader,{
                        loader:"css-loader",
                        options:{
                            sourceMap:true
                        }
                },{
                    loader:"postcss-loader",
                    options:{
                        ident:"postcss",//惟一標識，建議使用postcss
                        sourceMap:true,
                        plugins:(loader)=>[
                            require("autoprefixer")({overrideBrowserslist:["> 0.15% in CN"]}),//瀏覽器 份額大於0.15% 在中國 (已經包括IE8了)
                        ]
                    }
                },{
                    loader:"sass-loader",
                    options:{
                        sourceMap:true
                    }
                }],
            },
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/
            },
            {//處理圖片 路徑
                test:/\.(png|svg|gif|jpg|jpeg)$/,
                use:[
                    'file-loader' ] }
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            // Options similar to the same options in webpackOptions.output
            // both options are optional
            filename:'[name][hash].css',
            chunkFilename:'[id][hash].css',
        }),
        new HtmlWebpackPlugin({
            title:"webpack 溫習",//默認值webpack App
            filename:"main.html",//默認值index.html 是最終生成的文件名字
            template:path.resolve(__dirname,"src/index.html"),
            minify:{
                collapseWhitespace:true,//是否去空白
                removeComments:true,//是否移除註釋
                removeAttributeQuotes:true,//移除屬性的引號
            }
        }),
        new CleanWebpackPlugin(),//清理構建文件夾
    ],
    optimization:{
        minimizer:[
            new UglifyJsPlugin({
                cache: true,
                parallel: true,
                /**
                 *  sourceMap 和 devtool: 'inline-source-map', 衝突
                 */
                sourceMap: false, // set to true if you want JS source maps,
                /**
                 *  extractComments 導出備註
                 */
                extractComments: 'all'
            }),
            new OptimizeCSSAssetsPlutin({})
        ]
    }
    
}

這樣，打包時，圖片路徑就不會報錯了

 打包後，dist中會多出打包後的圖片文件

 

那麼，若是咱們想將圖片進行優化呢？

咱們須要藉助一個插件：

npm install image-webpack-loader --save-dev

config.js配置：

const path = require("path");
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlutin=require('optimize-css-assets-webpack-plugin');
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
module.exports={
    entry:"./src/index.js",//入口文件
    mode:"production",//模式是開發環境
    output:{//出口文件時main.js，打包到當前目錄的dist文件夾下
        filename:"main.[hash].js",
        path:path.resolve(__dirname,"dist")
    },
    module: {
        rules: [
            { 
                test: /\.(sc|c|sa)ss$/,//scss,css,sass
                use: [
                    MiniCssExtractPlugin.loader,{
                        loader:"css-loader",
                        options:{
                            sourceMap:true
                        }
                },{
                    loader:"postcss-loader",
                    options:{
                        ident:"postcss",//惟一標識，建議使用postcss
                        sourceMap:true,
                        plugins:(loader)=>[
                            require("autoprefixer")({overrideBrowserslist:["> 0.15% in CN"]}),//瀏覽器 份額大於0.15% 在中國 (已經包括IE8了)
                        ]
                    }
                },{
                    loader:"sass-loader",
                    options:{
                        sourceMap:true
                    }
                }],
            },
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/
            },
            {//處理圖片 路徑
                test:/\.(png|svg|gif|jpg|jpeg)$/,
                include:[path.resolve(__dirname,'src/')],
                use:[
                    'file-loader',
                    {
                        loader: 'image-webpack-loader', }, ] }
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            // Options similar to the same options in webpackOptions.output
            // both options are optional
            filename:'[name][hash].css',
            chunkFilename:'[id][hash].css',
        }),
        new HtmlWebpackPlugin({
            title:"webpack 溫習",//默認值webpack App
            filename:"main.html",//默認值index.html 是最終生成的文件名字
            template:path.resolve(__dirname,"src/index.html"),
            minify:{
                collapseWhitespace:true,//是否去空白
                removeComments:true,//是否移除註釋
                removeAttributeQuotes:true,//移除屬性的引號
            }
        }),
        new CleanWebpackPlugin(),//清理構建文件夾
    ],
    optimization:{
        minimizer:[
            new UglifyJsPlugin({
                cache: true,
                parallel: true,
                /**
                 *  sourceMap 和 devtool: 'inline-source-map', 衝突
                 */
                sourceMap: false, // set to true if you want JS source maps,
                /**
                 *  extractComments 導出備註
                 */
                extractComments: 'all'
            }),
            new OptimizeCSSAssetsPlutin({})
        ]
    }
    
}

 --------------------------------------------------------------------------------

將圖片進一步優化處理 成base64

將圖片轉化成base64的dataurl的形式，提升頁面性能

npm install --save-dev url-loader

咱們只須要將file-loader變成url-loader便可：

const path = require("path");
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlutin=require('optimize-css-assets-webpack-plugin');
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
module.exports={
    entry:"./src/index.js",//入口文件
    mode:"production",//模式是開發環境
    output:{//出口文件時main.js，打包到當前目錄的dist文件夾下
        filename:"main.[hash].js",
        path:path.resolve(__dirname,"dist")
    },
    module: {
        rules: [
            { 
                test: /\.(sc|c|sa)ss$/,//scss,css,sass
                use: [
                    MiniCssExtractPlugin.loader,{
                        loader:"css-loader",
                        options:{
                            sourceMap:true
                        }
                },{
                    loader:"postcss-loader",
                    options:{
                        ident:"postcss",//惟一標識，建議使用postcss
                        sourceMap:true,
                        plugins:(loader)=>[
                            require("autoprefixer")({overrideBrowserslist:["> 0.15% in CN"]}),//瀏覽器 份額大於0.15% 在中國 (已經包括IE8了)
                        ]
                    }
                },{
                    loader:"sass-loader",
                    options:{
                        sourceMap:true
                    }
                }],
            },
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/
            },
            {//處理圖片 路徑
                test:/\.(png|svg|gif|jpg|jpeg)$/,
                include:[path.resolve(__dirname,'src/')],
                use:[
                    { loader:'url-loader',
                        options:{//小於10000字節的圖片轉換成base64格式
                            limit:10000 } },
                    {
                        loader: 'image-webpack-loader',
                    },
                ]
            }
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            // Options similar to the same options in webpackOptions.output
            // both options are optional
            filename:'[name][hash].css',
            chunkFilename:'[id][hash].css',
        }),
        new HtmlWebpackPlugin({
            title:"webpack 溫習",//默認值webpack App
            filename:"main.html",//默認值index.html 是最終生成的文件名字
            template:path.resolve(__dirname,"src/index.html"),
            minify:{
                collapseWhitespace:true,//是否去空白
                removeComments:true,//是否移除註釋
                removeAttributeQuotes:true,//移除屬性的引號
            }
        }),
        new CleanWebpackPlugin(),//清理構建文件夾
    ],
    optimization:{
        minimizer:[
            new UglifyJsPlugin({
                cache: true,
                parallel: true,
                /**
                 *  sourceMap 和 devtool: 'inline-source-map', 衝突
                 */
                sourceMap: false, // set to true if you want JS source maps,
                /**
                 *  extractComments 導出備註
                 */
                extractComments: 'all'
            }),
            new OptimizeCSSAssetsPlutin({})
        ]
    }
    
}

 ----------------------------------------------------------------------------------

如何將不一樣環境的webpack配置文件合併，將共同配置共用？

npm install --save-dev webpack-merge

首先，咱們須要改變配置文件的結構，以前是webpack.config.js和webpack.product.config.js分別充當 開發和生產環境配置，

如今咱們分爲webpack.common.js、webpack.dev.js、webpack.prod.js  這三個文件分別寫着公共配置、開發環境特有配置、生產環境特有配置

下面寫出柵格文件的內容：

webpack.common.js:

const path = require("path");
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlutin=require('optimize-css-assets-webpack-plugin');
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
module.exports={
    entry:"./src/index.js",//入口文件
    module: {
        rules: [
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/
            },
            {//處理圖片 路徑
                test:/\.(png|svg|gif|jpg|jpeg)$/,
                include:[path.resolve(__dirname,'src/')],
                use:[
                    {
                        loader:'url-loader',
                        options:{//小於10000字節的圖片轉換成base64格式
                            limit:10000
                        }
                    },
                    {
                        loader: 'image-webpack-loader',
                    },
                ]
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            title:"webpack 溫習",//默認值webpack App
            filename:"main.html",//默認值index.html 是最終生成的文件名字
            template:path.resolve(__dirname,"src/index.html"),
            minify:{
                collapseWhitespace:true,//是否去空白
                removeComments:true,//是否移除註釋
                removeAttributeQuotes:true,//移除屬性的引號
            }
        }),
        new CleanWebpackPlugin(),//清理構建文件夾
    ],
    
    
}

webpack.dev.js:

const path = require("path");
const merge = require('webpack-merge');//引入webpack-merge參數
const common = require('./webpack.common');//將webpack.common.js引入
let devConfig={
    mode:"development",//模式是開發環境
    output:{//出口文件時main.js，打包到當前目錄的dist文件夾下
        filename:"main.js",
        path:path.resolve(__dirname,"dist")
    },
    module: {
        rules: [
            { 
                test: /\.(sc|c|sa)ss$/,//scss,css,sass
                use: ["style-loader",{
                        loader:"css-loader",
                        options:{
                            sourceMap:true
                        }
                },{
                    loader:"postcss-loader",
                    options:{
                        ident:"postcss",//惟一標識，建議使用postcss
                        sourceMap:true,
                        plugins:(loader)=>[
                            require("autoprefixer")({overrideBrowserslist:["> 0.15% in CN"]}),//瀏覽器 份額大於0.15% 在中國 (已經包括IE8了)
                        ]
                    }
                },{
                    loader:"sass-loader",
                    options:{
                        sourceMap:true
                    }
                }],
            }
        ]
    }
}

module.exports=merge(common,devConfig);//第一個參數是基本配置 後面的參數是當前配置

webpack.prod.js:

const path = require("path");
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlutin=require('optimize-css-assets-webpack-plugin');
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
const merge = require('webpack-merge');//引入webpack-merge參數
const common = require('./webpack.common');//將webpack.common.js引入
let prodConfig={
    mode:"production",//模式是開發環境
    output:{//出口文件時main.js，打包到當前目錄的dist文件夾下
        filename:"main.[hash].js",
        path:path.resolve(__dirname,"dist")
    },
    module: {
        rules: [
            { 
                test: /\.(sc|c|sa)ss$/,//scss,css,sass
                use: [
                    MiniCssExtractPlugin.loader,{
                        loader:"css-loader",
                        options:{
                            sourceMap:true
                        }
                },{
                    loader:"postcss-loader",
                    options:{
                        ident:"postcss",//惟一標識，建議使用postcss
                        sourceMap:true,
                        plugins:(loader)=>[
                            require("autoprefixer")({overrideBrowserslist:["> 0.15% in CN"]}),//瀏覽器 份額大於0.15% 在中國 (已經包括IE8了)
                        ]
                    }
                },{
                    loader:"sass-loader",
                    options:{
                        sourceMap:true
                    }
                }],
            },
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/
            },
            
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            // Options similar to the same options in webpackOptions.output
            // both options are optional
            filename:'[name][hash].css',
            chunkFilename:'[id][hash].css',
        }),
    ],
    optimization:{
        minimizer:[
            new UglifyJsPlugin({
                cache: true,
                parallel: true,
                /**
                 *  sourceMap 和 devtool: 'inline-source-map', 衝突
                 */
                sourceMap: false, // set to true if you want JS source maps,
                /**
                 *  extractComments 導出備註
                 */
                extractComments: 'all'
            }),
            new OptimizeCSSAssetsPlutin({})
        ]
    }
    
}

module.exports=merge(common,prodConfig);

 還有在package.json中記得把執行命令的--config改一下

{
  "name": "webpack1",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "npx webpack --config webpack.dev.js",
    "dist": "npx webpack --config webpack.prod.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.6.0",
    "@babel/plugin-transform-runtime": "^7.6.0",
    "@babel/preset-env": "^7.6.0",
    "@babel/runtime-corejs2": "^7.6.0",
    "autoprefixer": "^9.6.1",
    "babel-loader": "^8.0.6",
    "clean-webpack-plugin": "^3.0.0",
    "css-loader": "^3.2.0",
    "file-loader": "^4.2.0",
    "html-webpack-plugin": "^3.2.0",
    "image-webpack-loader": "^6.0.0",
    "mini-css-extract-plugin": "^0.8.0",
    "node-sass": "^4.12.0",
    "optimize-css-assets-webpack-plugin": "^5.0.3",
    "postcss-loader": "^3.0.0",
    "sass-loader": "^8.0.0",
    "style-loader": "^1.0.0",
    "uglifyjs-webpack-plugin": "^2.2.0",
    "url-loader": "^2.1.0",
    "webpack": "^4.39.3",
    "webpack-cli": "^3.3.8",
    "webpack-merge": "^4.2.2"
  },
  "dependencies": {
    "@babel/polyfill": "^7.6.0",
    "@babel/runtime": "^7.6.0",
    "lodash": "^4.17.15"
  }
}

 ------------------------------------------------------------------------------------------------------------------------------

js啓用sourcemap

webpack4默承認以啓用sourcemap

只須要在config文件中加上：(這個一般放在開發環境中)

devtool:'inline-source-map'

這樣在開發環境下，就能夠看到執行的js具體是在哪一個文件下的第幾行執行的

 -----------------------------------------------------------------------------------------------------------------

監控文件變化，啓用watch，當代碼發生變化時，自動編譯，自動打包

在webpack啓動的時候 加上一個 --watch命令

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "npx webpack --watch --config webpack.dev.js",
    "dist": "npx webpack --config webpack.prod.js"
  },

 -------------------------------------------------------------------------------------------------------------------

webpack-dev-server和熱更新

webpack-dev-server提供了一個Web服務器，可以實加載，它內置了webpack的編譯功能，是直接編譯在內存裏，而不是編譯在dist文件裏，

先安裝webpack-dev-server

npm install --save-dev webpack-dev-server

在webpack.dev.js：

const path = require("path");
const merge = require('webpack-merge');//引入webpack-merge參數
const common = require('./webpack.common');//將webpack.common.js引入
const webpack = require('webpack');
let devConfig={
    mode:"development",//模式是開發環境
    devtool:'inline-source-map',//開啓sourcemap  方便js調試
    output:{//出口文件時main.js，打包到當前目錄的dist文件夾下
        filename:"main.js",
        path:path.resolve(__dirname,"dist")
    },
    devServer: { contentBase: path.join(__dirname,"dist"), //告訴服務器 哪裏提供內容，默認狀況下將使用當前工做目錄做爲提供內容的目錄
        port: 8080, //端口號設爲8080, 默認也是8080
        clientLogLevel:'warning',//可能的值none、error、warning、info(默認值)
        hot:true,//啓用webpack的模塊熱替換特性，這個須要配合webpack.HotModuleReplacementPlugin插件
        compress:true,//一切服務都啓用gzip壓縮
        host:'localhost',//指定使用一個host，默認是localhost，若是你但願服務器外部可訪問0.0.0.0
        open:true,//是否打開瀏覽器
        overlay:{//出現錯誤或者警告的時候，是否覆蓋頁面線上錯誤消息
            warnings:true,
            errors:true
        },
        publicPath:'/',//此路徑下的打包文件 可在瀏覽器上訪問
        proxy:{
            "/api":{
                target:"http://192.168.0.102:8080",
                pathRewrite:{
                    "^/api":"/mockjsdata/5/api",
                    // /api/getuser => http://192.168.0.102:8080/mockjsdata/5/api/getuser
                }
            }
        },
        quiet:true,//啓動quiet後，除了初始啓動信息以外的任何內容都不會顯示
        watchOptions:{//監視文件相關控制選項
            poll:true,//webpack使用文件系統（file system）獲取文件改動的通知，在某些狀況下不會正常工做
            ignored:/node_modules/,//忽略監控的文件夾，正則
            aggregateTimeout:300,//默認值，當第一個文件改變，會在從新構建前增長延遲
 } },
    module: {
        rules: [
            { 
                test: /\.(sc|c|sa)ss$/,//scss,css,sass
                use: ["style-loader",{
                        loader:"css-loader",
                        options:{
                            sourceMap:true
                        }
                },{
                    loader:"postcss-loader",
                    options:{
                        ident:"postcss",//惟一標識，建議使用postcss
                        sourceMap:true,
                        plugins:(loader)=>[
                            require("autoprefixer")({overrideBrowserslist:["> 0.15% in CN"]}),//瀏覽器 份額大於0.15% 在中國 (已經包括IE8了)
                        ]
                    }
                },{
                    loader:"sass-loader",
                    options:{
                        sourceMap:true
                    }
                }],
            }
        ]
    },
    plugins:[ new webpack.NamedModulesPlugin(),//更容易查看path 的估值
        new webpack.HotModuleReplacementPlugin(),//替換插件
 ]
}

module.exports=merge(common,devConfig);//第一個參數是基本配置 後面的參數是當前配置

以後執行 npx webpack-dev-server --config webpack.dev.js  就會打開服務器，另外須要注意的是，webpack-dev-server內置了webpack的打包功能，可是它時打包到了內存中，而不是dist文件中

固然每次這樣執行命令太長了，就把它加到script的命令中：

"start": "npx webpack-dev-server --config webpack.dev.js"

 -------------------------------------------------------------------------------------------------------------

babel優化

js啓用babel轉碼：es6轉化爲es5

安裝

npm i -D babel-loader babel-core babel-preset-env

在公共webpack.common.js中添加：

module: {
        rules: [
            {
　　　　　　　　　 test: /\.js$/,
                exclude: /node_modules/,
                use:{
                    loader: 'babel-loader',
                    options:{
                        cacheDirectory:true,//開啓緩存 加快babel轉碼
                    }
                } 

            },
            
        ]
    },

記得在根目錄下建立一個.babelrc文件

{
    "presets": ["@babel/env"]
}

 ----------------------------------

另外 咱們在項目中可能在多個模塊中重複引用同個文件，這樣當babel轉碼時會一次性將這些重複文件都轉碼過去，形成文件體積變大，此時須要用到插件，將這些公共的文件提取出來。

npm install babel-plugin-transform-runtime --save-dev
npm install babel-runtime --save

在.babelrc中配置：

{
    "presets": ["@babel/env"]
}

 ------------------------------------------------------------------------------------------

eslint校驗：

安裝：

npm install eslint  --save-dev
npm install eslint-loader --save-dev

如下是用到的額外的須要安裝的eslint的解釋器、校驗規則等

npm i -D babel-eslint standard

在common.js中增長配置

const path = require("path");
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlutin=require('optimize-css-assets-webpack-plugin');
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
module.exports={
    entry:"./src/index.js",//入口文件
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use:[{
                    loader: 'babel-loader',
                    options:{
                        cacheDirectory:true,//開啓緩存 加快babel轉碼
                    }
                },{//必定要放在下面  先執行eslint檢測 再轉義  由於webpack是從後往前執行的
                    loader:'eslint-loader',
                    options:{
                        fix:true,//若有語法錯誤 自動修復
 } }]
            },
            {//處理圖片 路徑
                test:/\.(png|svg|gif|jpg|jpeg)$/,
                include:[path.resolve(__dirname,'src/')],
                use:[
                    {
                        loader:'url-loader',
                        options:{//小於10000字節的圖片轉換成base64格式
                            limit:10000
                        }
                    },
                    {
                        loader: 'image-webpack-loader',
                    },
                ]
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            title:"webpack 溫習",//默認值webpack App
            filename:"main.html",//默認值index.html 是最終生成的文件名字
            template:path.resolve(__dirname,"src/index.html"),
            minify:{
                collapseWhitespace:true,//是否去空白
                removeComments:true,//是否移除註釋
                removeAttributeQuotes:true,//移除屬性的引號
            }
        }),
        new CleanWebpackPlugin(),//清理構建文件夾
    ],
    
    
}

在跟目錄添加.eslintrc.js文件

module.exports={
    root:true,//是否是咱們的根目錄
    parserOptions: {
        parser:'babel-eslint'
    },
    env:{
        browser:true,
    },
    extends:[
        'standard'
    ],
    globals:{
        NODE_ENV:false
    },
    rules:{
        'generator-star-spacing':'off',
        'no-debugger': process.env.NODE_ENV === 'production' ? 'error':'off',
        //添加分號 必須
        'semi':['error','always'],
        'no-unexpected-multiline':'off',
        'space-before-function-paren':['error','never'],
        'quotes':[
            'error',
            'single',
            {
                'avoidEscape':true
            }
        ]
    }
}

在根目錄加.eslintignore文件

/dist/
/node-modules/
/*.js

 --------------------------------------------------------------------------------------------

resolve解析，當咱們引入一個文件時，好比import _ from './src/dev.js'

咱們能夠將路徑配置一個別名，方便引入模塊

在common.js中能夠加一條配置：

const path = require("path");
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlutin=require('optimize-css-assets-webpack-plugin');
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
module.exports={
    entry:"./src/index.js",//入口文件
    resolve:{
        alias:{
            '@':path.resolve(__dirname,'src/')
        },
        extensions:[".js",".vue",".json"],//默認.js  .json
 },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use:[{
                    loader: 'babel-loader',
                    options:{
                        cacheDirectory:true,//開啓緩存 加快babel轉碼
                    }
                },{//必定要放在下面  先執行eslint檢測 再轉義  由於webpack是從後往前執行的
                    loader:'eslint-loader',
                    options:{
                        fix:true,//若有語法錯誤 自動修復
                    }
                }]
            },
            {//處理圖片 路徑
                test:/\.(png|svg|gif|jpg|jpeg)$/,
                include:[path.resolve(__dirname,'src/')],
                use:[
                    {
                        loader:'url-loader',
                        options:{//小於10000字節的圖片轉換成base64格式
                            limit:10000
                        }
                    },
                    {
                        loader: 'image-webpack-loader',
                    },
                ]
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            title:"webpack 溫習",//默認值webpack App
            filename:"main.html",//默認值index.html 是最終生成的文件名字
            template:path.resolve(__dirname,"src/index.html"),
            minify:{
                collapseWhitespace:true,//是否去空白
                removeComments:true,//是否移除註釋
                removeAttributeQuotes:true,//移除屬性的引號
            }
        }),
        new CleanWebpackPlugin(),//清理構建文件夾
    ],
    
    
}

 ---------------------------------------------------------------------------------

webpack 配置外部拓展（externals）     cdn也能夠全局引入

在common.js中再增長一個配置  已引入jquery爲例

externals:{
        jquery:"jQuery",//寫法有多種能夠查一下
    },

這樣就能夠在main,js中import $ from 'jquery'  來全局引入jquery   另外這樣作有個好處就是 jquery不會打包到bundle裏去  大大減小文件體積

 -----------------------------------------------------------------------------------------

如何讓webpack打包後生成分析報表

安裝

npm install --save-dev webpack-bundle-analyzer

在dev.js中配置

const path = require("path");
const merge = require('webpack-merge');//引入webpack-merge參數
const common = require('./webpack.common');//將webpack.common.js引入
const webpack = require('webpack');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
let devConfig={
    mode:"development",//模式是開發環境
    devtool:'inline-source-map',//開啓sourcemap  方便js調試
    output:{//出口文件時main.js，打包到當前目錄的dist文件夾下
        filename:"main.js",
        path:path.resolve(__dirname,"dist")
    },
    devServer: {
        contentBase: path.join(__dirname,"dist"), //告訴服務器 哪裏提供內容，默認狀況下將使用當前工做目錄做爲提供內容的目錄
        port: 8080, //端口號設爲8080, 默認也是8080
        clientLogLevel:'warning',//可能的值none、error、warning、info(默認值)
        hot:true,//啓用webpack的模塊熱替換特性，這個須要配合webpack.HotModuleReplacementPlugin插件
        compress:true,//一切服務都啓用gzip壓縮
        host:'localhost',//指定使用一個host，默認是localhost，若是你但願服務器外部可訪問0.0.0.0
        open:true,//是否打開瀏覽器
        overlay:{//出現錯誤或者警告的時候，是否覆蓋頁面線上錯誤消息
            warnings:true,
            errors:true
        },
        publicPath:'/',//此路徑下的打包文件 可在瀏覽器上訪問
        proxy:{
            "/api":{
                target:"http://192.168.0.102:8080",
                pathRewrite:{
                    "^/api":"/mockjsdata/5/api",
                    // /api/getuser => http://192.168.0.102:8080/mockjsdata/5/api/getuser
                }
            }
        },
        quiet:true,//啓動quiet後，除了初始啓動信息以外的任何內容都不會顯示
        watchOptions:{//監視文件相關控制選項
            poll:true,//webpack使用文件系統（file system）獲取文件改動的通知，在某些狀況下不會正常工做
            ignored:/node_modules/,//忽略監控的文件夾，正則
            aggregateTimeout:300,//默認值，當第一個文件改變，會在從新構建前增長延遲


        }
    },
    module: {
        rules: [
            { 
                test: /\.(sc|c|sa)ss$/,//scss,css,sass
                use: ["style-loader",{
                        loader:"css-loader",
                        options:{
                            sourceMap:true
                        }
                },{
                    loader:"postcss-loader",
                    options:{
                        ident:"postcss",//惟一標識，建議使用postcss
                        sourceMap:true,
                        plugins:(loader)=>[
                            require("autoprefixer")({overrideBrowserslist:["> 0.15% in CN"]}),//瀏覽器 份額大於0.15% 在中國 (已經包括IE8了)
                        ]
                    }
                },{
                    loader:"sass-loader",
                    options:{
                        sourceMap:true
                    }
                }],
            }
        ]
    },
    plugins:[
        new webpack.NamedModulesPlugin(),//更容易查看path 的估值
        new webpack.HotModuleReplacementPlugin(),//替換插件
        new BundleAnalyzerPlugin(),//生成打包報表
    ]
}

module.exports=merge(common,devConfig);//第一個參數是基本配置 後面的參數是當前配置

而後 打包一下，就會出現報表

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程