vue文件添加編譯

---

指令:1: npm install vue-loader vue-template-compiler --save-dev

2:config中配置

{
  test: /\.vue$/,
  exclude: /(node_modules|bower_components)/,
  use: ['vue-loader']
}

3:當版本編譯失敗時可以適當降低版本,如果過高,要安裝插件,建議^13.0.0

 

打包...

 npm install html-webpack-plugin --save-dev

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

new HtmlWebpackPlugin({
  template: 'index.html',
}),

 

壓縮版本

npm install uglifyjs-webpack-plugin@1.1.1 --save -dev

 

const uglifyjsWebpack = require('uglifyjs-webpack-plugin')

new uglifyjsWebpack(),



安裝express框架
============================

一:npm install --save -dev webpack-dev-server@2.9.3

二:

devServer:{
  contentBase:'./dist',
  inline: true
}

三:dev腳本

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "build": "webpack",
  "dev": "webpack-dev-server --open"
},

 

 配置分離

1: npm install webpack-merge --save -dev

 2:引入

 

const uglifyjsWebpack = require('uglifyjs-webpack-plugin')
const webpackMerge = require('webpack-merge')
const baseConfig = require('./base.config')
module.exports=webpackMerge(baseConfig, {
  plugins:[
    new uglifyjsWebpack(),
  ],
})

3:更改輸出路徑