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.打包优化

webpack打包vue -->简易讲解

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