webpack4.41.0配置三（插件minCssExtract/ DefinePlugin/Html）

時間 2019-11-09

標籤 webpack4.41.0 webpack 配置插件 mincssextract defineplugin html 欄目 HTML 简体版

原文原文鏈接

（注：如無特殊說明這裏的配置文件都指的是webpack.config.js）css

minCssExtracthtml

咱們一般指望js和js文件一塊兒，css和css文件一塊兒。該插件將CSS提取到單獨的文件中。它爲每一個包含CSS的JS文件建立一個CSS文件。它支持CSS和SourceMap的按需加載。node

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

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

3.在配置文件中建立plugins結點，而且對rules進行相應的變化npm

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文件的分離)sass

DefinePluginbash

生產環境和開發環境中會有不少不同的需求，好比在生產環境下要訪問生產環境下的服務器地址，在開發環境下要訪問開發環境下的服務器地址。可是咱們不能用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中引入的地方也會自動進行了修改