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`,
          })