vue plugin、搭建本地服务器、配置文件分离webpack

相关代码

基本插件

1.配置webpack.config.js

打包html的plugin

参考视频

1.通过node安装插件
2.配置webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin')
//在module.exports中
 plugins: [
      new webpack.BannerPlugin('最终版权归aaa所有'),
      new HtmlWebpackPlugin({
     
        template: 'index.html'
      }),
      new UglifyjsWebpackPlugin()
  ]

js压缩的plugin

搭建本地服务器

1.配置webpack.config.js

2. 配置package.json

这样的话运行服务器会自动打开浏览器

3.运行 npm run dev

webpack配置文件的分离

建立一个配置文件（支付webpack.config.js）的内容

要做一下改善

然后再建立

dev.config.js

const webpackMerge = require('webpack-merge')
const baseConfig = require('./base.config')

module.exports = webpackMerge(baseConfig, {
     
  devServer: {
     
    contentBase: './dist',
    inline: true
  }
})

prod.config.js

const UglifyjsWebpackPlugin = require('uglifyjs-webpack-plugin')
const webpackMerge = require('webpack-merge')
const baseConfig = require('./base.config')

module.exports = webpackMerge(baseConfig, {
     
  plugins: [
    new UglifyjsWebpackPlugin()
  ]
})

其实到这里webpack.config.js已经没有用了可以删除了
接着是在package.json中指明配置文件

运行npm run build 自动打包到配置文件所在的文件夹里

如果修改路径的话