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配置四(热替换)：http://www.javashuo.com/article/p-pyeynywc-v.html