webpack插件

最新推荐文章于 2025-07-16 08:17:56 发布

Night_Emperor

最新推荐文章于 2025-07-16 08:17:56 发布

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： webpack

本文链接：https://blog.youkuaiyun.com/Night_Emperor/article/details/83018310

webpack 专栏收录该内容

3 篇文章

订阅专栏

本文介绍如何使用DefinePlugin在Webpack中定义全局变量，并通过extract-text-webpack-plugin将CSS从JavaScript中分离出来，形成独立的CSS文件，提升网页加载速度。

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 extract-text-webpack-plugin@3.0.2 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`,
          })