《前端》使用webpack+vue从零开始打造前端项目(2020最新版)四--插件的使用--bilibili-2021年1月27日

本文链接：https://blog.youkuaiyun.com/bellediao/article/details/113029273

本文介绍了如何在webpack+vue项目中使用三个关键插件：html-webpack-plugin用于自动创建并引入打包后的js到index.html，clean-webpack-plugin确保每次打包的文件是最新的，以及autoprefixer自动添加浏览器前缀到CSS。详细步骤包括安装、配置及依赖处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

九、插件

在某个时间点，自动执行的处理程序

（一）html-webpack-plugin

打包结束时，在dist目录下自动生成index.html 文件，并把打包好的js文件引入到html中。

1、安装：npm install -D html-webpack-plugin

2、配置插件：

（1）在webpack.config.js中引入插件：

const htmlWebpackPlugin = require('html-webpack-plugin')

（2）在plugins:[],中添加配置内容：new HtmlWebpackPlugin(),

再次打包之后，只要npm run build，index.html 就自动打包到dist中。

（3）但是自动生成index.html时，里面的代码内容没有加载进文件中，如下两张图：

这就需要另外配置：

        new HtmlWebpackPlugin({

            template:'index.html',

        }),

现在自己建立的index.html和dist生成的index.html一致了。

（二）clean-webpack-plugin

保证每次打包的文件都是最新的

1、安装

npm install -D clean-webpack-plugin

2、引入 （注这里使用新版的ES6的写法，加{}）

3、webpack配置

// 引入 clean-webpack-plugin 插件
const { cleanWebpackPlugin } = require('clean-webpack-plugin')

（三）autoprefixer

作用：Autoprefixer是一款自动管理浏览器前缀的插件，可以解析css文件并且添加前缀到css内容里。

Autoprefixer特点
（1）写纯净的css，不必学习特殊语言（如Sass），也不必记住其使用环境；
（2）与最新的规则同步；

autoprefixer插件是 postcss-loader 提供的一个插件，依赖于postcss-loader，还需要安装postcss-loader。

1、安装 postcss-loader 和autoprefixer

npm install -D postcss-loader autoprefixer

2、webpack配置

,{//stylus-loader

            test: /\.styl(us)$/,

            use: ['style-loader', 'css-loader', 'postcss-loader','stylus-loader']

        }]

由于postcss还需要加载autoprefixer插件，所以在大文件夹下新建一个配置文件postcss.config.js里面写如下配置：

module.exports={

    plugins:[

        require('autoprefixer')

    ],}

打包报错：

ERROR in ./src/app.vue?vue&type=style&index=0&id=5ef48958&lang=stylus&scoped=true& (./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js!./node_modules/stylus-loader/dist/cjs.js!./node_modules/vue-loader/lib/index.js??vue-loader-options!./src/app.vue?vue&type=style&index=0&id=5ef48958&lang=stylus&scoped=true&)
Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
Error: PostCSS plugin autoprefixer requires PostCSS 8.
Migration guide for end-users:
https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users
    at Processor.normalize (C:\Users\Bella\Desktop\firstVueDemo\node_modules\postcss\lib\processor.js:153:15)    
    at new Processor (C:\Users\Bella\Desktop\firstVueDemo\node_modules\postcss\lib\processor.js:56:25)
    at postcss (C:\Users\Bella\Desktop\firstVueDemo\node_modules\postcss\lib\postcss.js:55:10)
    at Object.loader (C:\Users\Bella\Desktop\firstVueDemo\node_modules\postcss-loader\dist\index.js:95:20)
 @ ./node_modules/style-loader/dist/cjs.js!./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js!./node_modules/stylus-loader/dist/cjs.js!./node_modules/vue-loader/lib/index.js??vue-loader-options!./src/app.vue?vue&type=style&index=0&id=5ef48958&lang=stylus&scoped=true& 
2:12-348 9:17-24 13:15-29
 @ ./src/app.vue?vue&type=style&index=0&id=5ef48958&lang=stylus&scoped=true& 1:0-370 1:0-370
 @ ./src/app.vue 4:0-90
 @ ./src/main.js 6:0-27 13:8-11

webpack 5.15.0 compiled with 1 error in 1435 ms
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! firstVue@1.0.0 build: `webpack`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the firstVue@1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     D:\Program Files\nodejs\node_cache\_logs\2021-01-27T10_43_10_972Z-debug.log