webpack打包vue -->简易讲解

### 1. 测试环境:

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

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

1. webpack.config.js自行安装

{
  "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

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

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

 

webpack.config.js

// 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

// 引入必要的模块
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.打包优化