webpack插件

1. DefinePlugin 定义全局变量,这个插件是webpack自带的。在 webpack 打包的时候会对这些变量做替换。

new webpack.DefinePlugin({
            "ENV":'"production"',
            'PRODUCTION': JSON.stringify(true),
          })

在js文件中,可以当做全局变量使用，注意全局变量的值是引号里面的内容

console.log(ENV);//"production"
console.log(typeof ENV);//string
if(PRODUCTION){
    console.log(typeof PRODUCTION);// boolean
}

为什么说是替换呢？来看打包后的代码

console.log("production");
console.log("string");
if(true){
    console.log("boolean");
}

2.extract-text-webpack-plugin：提取出 JavaScript 代码里的 CSS 到一个单独的文件

npm i -D extract-text-webpack-plugin

下载npm包时，有一个警告，意思是当前安装extract-text-webpack-plugin的版本是3.0.2，需要依赖webpack@^3.1.0，

npm WARN [email protected] requires a peer of webpack@^3.1.0 but none is
 installed. You must install peer dependencies yourself.

但是项目中webpack的版本是4.20.2，这导致运行时报错，需要安装最新的extract-text-webpack-plugin

npm i -D extract-text-webpack-plugin@next

使用方式

1.   const ExtractTextPlugin = require('extract-text-webpack-plugin');

2.         {
                test:/\.css$/,
               use:ExtractTextPlugin.extract({
                // 读取.css 文件需要使用的 Loader
                use: ['css-loader'],
              }),
            }


3. new ExtractTextPlugin({
            filename: `[name].css`,
          })