webpack4.41.0配置三(插件minCssExtract/ DefinePlugin/Html)


(注:如無特殊說明這里的配置文件都指的是webpack.config.js

minCssExtract

我們通常期望js和js文件一起,css和css文件一起。該插件將CSS提取到單獨的文件中。它為每個包含CSS的JS文件創建一個CSS文件。它支持CSS和SourceMap的按需加載。

1.安裝組件命令:npm install  mini-css-extract-plugin     

2. 在配置文件中引入:const MiniCssExtractPlugin = require('mini-css-extract-plugin');

 3.在配置文件中創建plugins結點,並且對rules進行相應的變化

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
    entry: './input.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'output.bundle.js'
    },
   plugins: [ new MiniCssExtractPlugin({
            // Options similar to the same options in webpackOptions.output
            // all options are optional
            //name為entry入口文件名
            filename: '[name].css',
            chunkFilename: '[id].css',
            ignoreOrder: false, // Enable to remove warnings about conflicting order
 }), ],
    module: {
        rules: [
            {
                test: /\.(png|jpg|gif)$/i,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            //小於限制的變成base64,大於的變成普通的物理文件
                            limit: 8192
                        }
                    }
                ]
            },
            {
                test: /\.m?js$/,
                //排除一些文件
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }
            },
            {
                test: /\.scss$/,
                use: [
                  MiniCssExtractPlugin.loader, 'css-loader',
                    'sass-loader'
                ]
            }
        ]
    }

}

4.新建text.scss,在input.js入口文件中引入text.scss文件

 

 

4.進行webpack打包,會發現在dist文件夾下多了個main.css(實現了css和js文件的分離)

 


 

DefinePlugin

 生產環境和開發環境中會有很多不一樣的需求,比如在生產環境下要訪問生產環境下的服務器地址,在開發環境下要訪問開發環境下的服務器地址。但是我們不能用if else去判斷,不方便維護。這時候這個插件的作用就出現了,我們的代碼只寫一套,但是我們把這個變量的定義放在DefinePlugin中,也就是webpack文件中去,我們使用的時候只使用這個變量就行了

1.在官網中https://webpack.docschina.org/plugins/找到需要使用的變量,將它添加到配置文件中的plugins中去

 2.然后可以直接在代碼中使用變量就可以了,比如在input.js中修改代碼:

這樣子就算以后的服務器地址變了,我們也不需要改代碼,只需要修改配置文件就可以了

3.這時候進行打包會報錯

 那是因為我們沒有在配置文件中導入webpack。我們現在去導入Webpack

 之后再進行打包就可以了。

 


 

Html

使用的目的是為了幫助我們生成html文件,因為我們的js文件不能獨立運行,那么它肯定需要被某個html文件包含進去,才能在瀏覽器里面運行起來。怎么能給它包含在某個html文件中去呢?這時候需要用到這個插件

1.首先先安裝插件:npm install html-webpack-plugin -D

2.然后在配置文件中進行配置

 3.然后就可以運行了,執行webpack。會發現dist文件夾中自動多了個index.html。打開index.html(會發現它自動給我們引入了css和js文件)

 比較方便的是,我們在修改文件名的時候,在出口中修改出口文件名,相應的html中引入的地方也會自動進行了修改

 

 

 

4.但是我們經常不需要自動生成html代碼,只需要幫我們引入css和js 就行了。因為html代碼我們通常都會自己定義。這時候,我們需要做一下調整:

4.1點擊下面紅色方框部分(在官網中找到這個插件的文檔)

4.2進去新頁面滑下去看到它的用法

 

 4.3參考配置,去我們的配置文件進行配置

4.4新建輸入文件template.html

4.5觀察剛才的文檔,發現title是這種用法

 4.6所以相應的template.html中也要改變

之后會自動替換成我們在配置文件中定義的title(Good morning)

4.7可能我們還想使用自己的js文件,但是並不想要打包。我們直接在template.html中引入。還可以寫自己的代碼

 

 4.8之后執行打包,會發現打包過后的index.html中包含自己引入的js文件和自己寫的html代碼

4.8之后我們可以在input.js中使用index.html頁面中的id為“good”的結點

5.在執行打包

最后在瀏覽器打開打包過后的index.html是最后看到的效果

歡迎大家繼續查看webpack4.41.0配置四(熱替換):https://www.cnblogs.com/ahaMOMO/p/11632242.html


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM