webpack打包vue -->简易讲解

### 1. 测试环境:

推荐这篇文章:讲的很细致

https://www.cnblogs.com/lhweb15/p/5660609.html

#### 1. webpack.config.js自行安装

```javascript

{  "name": "vuetest",  "version": "1.0.0",  "description": "",  "main": "index.js",  "scripts": {    "start": "webpack --display-modules --display-chunks --config build/webpack.config.js",    "test": "echo \"Error: no test specified\" && exit 1"  },  "author": "",  "license": "ISC",  "dependencies": {    "babel-loader": "^7.1.4",    "babel-preset-es2015": "^6.24.1",    "css-loader": "^0.28.11",    "file-loader": "^1.1.11",    "html-webpack-plugin": "^3.2.0",    "less": "^3.0.4",    "less-loader": "^4.1.0",    "style-loader": "^0.21.0",    "vue": "^2.5.16",    "webpack": "^4.12.0",    "webpack-dev-server": "^3.1.4"  },  "devDependencies": {    "babel-cli": "^6.26.0",    "express": "^4.16.3",    "webpack-cli": "^3.0.8",    "webpack-dev-middleware": "^3.1.3",    "webpack-hot-middleware": "^2.22.2"  }}

```

#### 2.配置文件：

dev-clietn.js

```javascript

var hotClient = require(‘webpack-hot-middleware/client‘)

// 订阅事件，当 event.action === ‘reload‘ 时执行页面刷新hotClient.subscribe(function (event) {    if (event.action === ‘reload‘) {        window.location.reload()    }})

```

webpack.config.js

```javascript

// nodejs 中的path模块var path = require(‘path‘);var HtmlWebpackPlugin = require(‘html-webpack-plugin‘);var webpack = require(‘webpack‘);module.exports = {    mode:"development",    //entry:[‘webpack-hot-middleware/client‘, path.resolve(__dirname, ‘../app/index.js‘)],    entry: {        app: [            ‘./build/dev-client‘,            path.resolve(__dirname, ‘../app/index.js‘)        ]    },    // 输出配置    output: {        // 输出路径是 myProject/output/static        path: path.resolve(__dirname, ‘./static‘),        //publicPath: ‘static/‘,        publicPath: "/",        filename: ‘[name].[hash].js‘,        chunkFilename: ‘[id].[chunkhash].js‘    },    resolve:{        alias:{            ‘vue$‘:‘vue/dist/vue.js‘        }    },    module:{        rules: [            {test: /\.vue$/, loader: ‘vue-loader‘ },            {test:/\.(eot|woff|woff2|svg|ttf)([\?]?.*)$/,loader:"file-loader"},            {test: /\.(png|jpg|gif)$/,loader: ‘url-loader?limit=8192‘},            {test: /\.less$/i, use: [‘style-loader‘, { loader: ‘css-loader‘, options: { importLoaders: 1 } },‘less-loader‘]},        ]    },    plugins: [        // 添加三个插件        new webpack.optimize.OccurrenceOrderPlugin(),        new webpack.HotModuleReplacementPlugin(),        new webpack.NoEmitOnErrorsPlugin(),        new HtmlWebpackPlugin({            filename: ‘index.html‘,            template: path.resolve(__dirname, ‘../app/index.html‘),            inject: true        }),    ]}

```

webpack.dev.config.js

```javascript

// 引入必要的模块var express = require(‘express‘)var webpack = require(‘webpack‘)var config = require(‘./webpack.config‘)

// 创建一个express实例var app = express()

// 调用webpack并把配置传递过去var compiler = webpack(config)

// 使用 webpack-dev-middleware 中间件var devMiddleware = require(‘webpack-dev-middleware‘)(compiler, {    publicPath: config.output.publicPath,    stats: {        colors: true,        chunks: false    }})var hotMiddleware = require(‘webpack-hot-middleware‘)(compiler)// webpack插件，监听html文件改变事件compiler.plugin(‘compilation‘, function (compilation) {compilation.plugin(‘html-webpack-plugin-after-emit‘, function (data, cb) {    // 发布事件    hotMiddleware.publish({ action: ‘reload‘ })        cb()    })})// 注册中间件app.use(devMiddleware)app.use(hotMiddleware)// 监听 8881端口，开启服务器app.listen(8881, function (err) {    if (err) {        console.log(err)        return    }    console.log(‘Listening at http://localhost:8881‘)})

```

### 2. 生产环境

### 3.打包优化

原文地址：https://www.cnblogs.com/subtract/p/9220549.html