webpack配置打包

時間 2021-08-14

標籤 css html node webpack es6 web 正則表達式 express npm json 欄目 CSS 简体版

原文原文鏈接

1、webpack基本安裝

一、建立webpack項目目錄如webpackDemo，並進入webpackDemo;css

二、在node已經安裝的前提下，打開命令行控制器，輸入以下命令：html

npm init -y 
npm install webpack webpack-cli --save-dev  //安裝webpack webpack-cli
(MacOS: sudo npm install webpack webpack-cli -g,sudo npm isntall webpack webpack-cli --save-dev)

命令執行結束後，會生成package.json、package_lock.json、node_modules文件。而後手動建立src目錄與package.json平級，src目錄下有index.html ，index.js　。node

注：npm使用的是淘寶鏡像，使用命令 npm install --registry=https://registry.npm.taobao.org express (臨時使用)；webpack

　　(MacOS 若是上面命令不生效，能夠使用此命令: npm config set registry https://registry.npm.taobao.org).es6

2、webpack概念

一、 webpack有四個核心概念：entry(入口) 、output(輸出)、loader、plugin(插件)。web

entry（入口）

告訴webpack構建內部依賴圖開始的模塊；能夠指定單入口起點文件或多入口起點文件。正則表達式

module.exports = {
    entry:"./src/index.js"}

output（輸出）

告訴webpack輸出建立的bundles，以及如何命名文件。指定編譯後的輸出文件路徑。express

const OUTPUT_FILE_NAME = "dist"module.exports = {
    entry:"./src/index.js",
    output: {
        filename: "[name].[contenthash:10].js", //輸出文件名稱， hash解決緩存問題
        path: path.resolve(__dirname,'dist') //輸出文件路徑    }
}

loader

loader可讓webpack能夠處理非JavaScript文件，webpack自己只能處理JavaScript。npm

webpack配置loader有兩個目標：json

a). test屬性，用於被對應的loader進行轉換的某個和某些文件；

b). use屬性，表示進行轉換時，應該使用哪一個loader；

module.exports = {
    output: {
        filename: "[name].[contenthash:10].js", //輸出文件名稱， hash解決緩存問題
        path: path.resolve(__dirname, OUTPUT_FILE_NAME) //輸出文件路徑    },
    module: {
        rules: [{                //整理html的img資源，
                test: /\.html$/,
                use: ["html-loader"]
            },
            {                //處理css資源
                test: /\.css$/,
                use: ["css-loader", "style-loader"]
            },
            {                //處理JS資源
                test: /\.jsx?$/,
                use: ['file-loader']
            }]
    }
}

插件plugins

loader用於轉換某些類型，插件用於執行更普遍的任務。若使用一個插件，只需require()，而後添加到數組中。

module.exports = {
    ...,
    plugins: [        new HtmlWebpackPlugin({
            template: "./src/index.html",
            hash: true
        }),        new MiniCssExtarctPlugin({
            filename: 'css/[name].[contenthash:10].css',
            path: path.resolve(__dirname,'dist')
        })

    ]
}

附所有代碼：

package.json

{  "name": "webpack_demo",  "version": "1.0.0",  "description": "",  "scripts": {    "test": "echo \"Error: no test specified\" && exit 1",    "watch": "webpack --watch",    "start": "webpack --config webpack.config.js",    "build": "webpack --config webpack.config.pro.js"
  },  "keywords": [],  "author": "",  "license": "ISC"}

webpack.config.js

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtarctPlugin = require("mini-css-extract-plugin"); //將css從js中提取出來const OUTPUT_FILE_NAME = "dist";
module.exports = {
    entry: "./src/index.js",
    output: {
        filename: "[name].[contenthash:10].js", //輸出文件名稱，hash解決緩存問題,具體可見下面的解釋
        path: path.resolve(__dirname, OUTPUT_FILE_NAME) //輸出文件路徑    },

    mode: "development", //開發環境,生產環境使用"production"    module: {
        rules: [{                //整理html的img資源，
                test: /\.html$/,
                use: ["html-loader"]
            },
            {                //處理css資源
                test: /\.css$/,
                use: [                    //將css文件整合到JS文件中
                    "css-loader",                    //建立style標籤，將樣式放入 
                    "style-loader",                    // css兼容性處理：postcss-->postcss-loader postcss-preset-env                ]
            },
            {                //處理JS資源
                test: /\.js$/,
                exclude: /node_modules/, //處理除了nodde_modules裏的js文件
                loader: 'babel-loader' //用babel-loader處理
            },
            {                //處理圖片資源
                test: /\.(png|svg|jpg|gif)$/,
                use: ['file-loader']
            },
            {                // exclude: /\.(css|js|html)$/, //排除正則內的資源
                test: /\.(png|svg|jpg|gif)$/,                // 這裏是匹配條件，每一個選項都接收一個正則表達式或字符串
                // test 和 include 具備相同的做用，都是必須匹配選項
                // exclude 是必不匹配選項（優先於 test 和 include）
                // 最佳實踐：
                // - 只在 test 和 文件名匹配 中使用正則表達式
                // - 在 include 和 exclude 中使用絕對路徑數組
                // - 儘可能避免 exclude，更傾向於使用 include
                use: ['file-loader'],                // options: {
                //     name: "[hash:10].[ext]" //名字太長進行截取
                // }            }
        ]
    },
    resolve: {
        extensions: ['.js', '.json']
    },    /*
    source-map：外聯
    inline-source-map :    */
    devtool: "source-map", //告訴webpack提供源代碼
    plugins: [        // 將CSS文件從JS文件中提取出來
        new MiniCssExtarctPlugin({
            filename: 'css/[name].[contenthash:10].css',
            path: path.resolve(__dirname, OUTPUT_FILE_NAME)
        }),        new HtmlWebpackPlugin({
            template: "./src/index.html"
        })
    ],

    devServer: {
        port: 5000, //端口號
        contentBase: OUTPUT_FILE_NAME, //可訪問問文件
        hot: true, //開啓HMR熱更新
        https: true, //使用https
        compress: true, // 啓用壓縮
        // proxy: {
        //     "/": "http://localhost:3000", //使用代理路徑
        // }    },    /** code splitting 代碼分割
     * 當單入口時，能夠將 node_modules中代碼單獨打包成一個chunk；
     * 當多入口時，提取公共文件單獨打包成一個chunk;     */
    optimization: {
        splitChunks: {
            chunks: "all"
        }
    }    /**
     * 緩存：
     * Babel緩存  
     *      cacheDirectory:true
     *       -->讓第二次打包更快 
     * 文件資源緩存：
     *      hash ：每次webpack構建是會生成一個惟一的hash值；
     *      問題：js和css使用同一個hash值，會致使緩存失效，可能值改變一個文件；
     *      chunkhash：根據chunk生成的hash值，若是打包來自同一個chunk，那麼hash是同樣的
     *      問題：chunkhash是同樣的，由於css是在js中被引用的，屬於同一個chunk；
     *      contenthash：根據文件內容生成hash值，不一樣文件的hash值不同；
     *       -->讓代碼上線運行緩存更好使用 
     * 
     */

    /**
     * tree shaking:去除無用代碼
     * 前提： 1.必須使用ES6模塊化  2.開啓production環境
     * 做用： 減小代碼體積
     * 
     * 在package.json中設置：
     *      sideEffects:false 全部代碼都沒有反作用（均可以進行tree shaking）
     *      問題：可能會把css @babel/polyfill（反作用）文件幹掉
     *      sideEffects:["*.css",".less"] 不會進行tree shaking     */

    /**
     * HMR :hot module replacement 熱模塊
     * 做用：一個模塊發生變化指揮從新打包這個模塊，並不從新打包全部。提升打包速度。
     * 樣式文件：能夠經過HMR實現，style-loader已實現
     * JS文件：默認不使用HMR功能-->修改JS文件代碼，只能處理非入口文件。
     * if(module.hot){
     *      module.hot.accept("index.js",()=>{
     *          //監聽文件變化，一旦發生變法，其餘地方不會從新打包，直接執行回調
     *      }))
     * }
     * Html文件：默認不使用HMR功能，同時會出問題（無需作HMR功能）
     * 解決方案：修改entry入口，引入html文件
     * 
     * 
     */}

wenpack.config.pro.js

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtarctPlugin = require("mini-css-extract-plugin"); //將css從js中提取出來const OptiminizeCssAssetsPlugin = require("optimize-css-assets-webpack-plugin"); //壓縮CSSconst UglifyJsPlugin = require("uglifyjs-webpack-plugin");

const OUTPUT_FILE_NAME = "dist";
module.exports = {
    entry: "./src/index.js",
    output: {
        filename: "js/[name].[contenthash:10].js", //輸出文件名稱，hash解決緩存問題,具體可見下面的解釋
        chunkFilename: 'js/[name].[contenthash:10].bundle.js', //  依賴文件名稱  
        path: path.resolve(__dirname, OUTPUT_FILE_NAME), //輸出文件路徑
        publicPath: '/' //  公共路徑     },
    mode: "production", //生產環境    module: {
        rules: [{
                test: /\.html$/,
                use: ["html-loader"]
            },
            {
                test: /\.css$/,
                use: [MiniCssExtarctPlugin.loader, "css-loader"]
            },
            {
                test: /\.jsx?$/,
                exclude: /node_modules/, //處理除了nodde_modules裏的js文件
                loader: 'babel-loader' //用babel-loader處理es6            },
            {
                test: /\.(png|svg|jpg|gif)$/,
                use: ['file-loader'],
            }
        ]
    },
    devtool: "source-map", //告訴webpack提供源代碼    plugins: [        new HtmlWebpackPlugin({
            template: "./src/index.html",
            hash: true
        }),        new MiniCssExtarctPlugin({
            filename: 'css/[name].[contenthash:10].css',
            path: path.resolve(__dirname, OUTPUT_FILE_NAME)
        }),        /**
         * optimize-css-assets-webpack-plugin  會使webpack中自帶的JS壓縮失效，須要從新配置UglifyJsPlugin         */
        new OptiminizeCssAssetsPlugin(),
    ],    /** code splitting 代碼分割
     * 當單入口時，能夠將 node_modules中代碼單獨打包成一個chunk；
     * 當多入口時，提取公共文件單獨打包成一個chunk;     */
    optimization: {
        splitChunks: {
            chunks: "all"
        }
    }
}