webpack插件plugin配置和使用

###1.webpack.config.js配置横幅插件

打包之后会在js文件中输出

###2.配置打包html文件的插件 命令：npm i html-webpack-plugin --save-dev 导入安装的插件 配置piugin属性，传入导出的模板

###3.js代码压缩插件 命令：ar UglifyJsPlugin = webpack.optimize.UglifyJsPlugin;

###4.搭建本地服务器插件 命令：npm i --save-dev webpack-dev-server package.json中配置scripts属性

webpack.config.js中配置devServer

###5.webpack模板合并抽离 命令：npm install webpack-merge -D

const merge = require("webpack-merge");
module.exports = merge(引入的webpack文件名, {
  
}

##package.json配置

{
  "name": "test",
  "version": "1.0.0",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config ./build/prod.config.js",
    //可以指定打包到目录文件下
    "dev": "webpack-dev-server --open --config ./build/dev.config.js"
    //此命令相当于将本地的代码存放在内存当中，搭建一个服务器并在浏览器中运行
    //指定本地运行服务器寻找的文件,相当于寻找默认的webpack.config.js文件
  },
  "author": "",
  "license": "ISC",
  "description": "",
  "devDependencies": {
    "css-loader": "^3.4.2",
    "file-loader": "^5.1.0",
    "html-webpack-plugin": "^3.2.0",
    "less": "^3.11.1",
    "less-loader": "^5.0.0",
    "loader": "^2.1.1",
    "style-loader": "^1.1.3",
    "uglifyjs-webpack-plugin": "^2.2.0",
    "url-loader": "^3.0.0",
    "vue": "^2.6.11",
    "vue-loader": "^13.0.0",
    "vue-template-compiler": "^2.6.11",
    "webpack": "^3.6.0",
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.10.3"
  },
  "dependencies": {
    "vue": "^2.6.11"
  }
}