webpack打包项目文件

在项目开发中想了解一下使用webpack打包vue项目的具体操作

1、在命令窗口中使用npm run dev/serve启动package.json中配置的脚本运行项目

2、在build/dev-server.js文件中

const configer = require('../config')
const config = configer();
console.log(config)
if (!process.env.NODE_ENV) {
  process.env.NODE_ENV = JSON.parse(config.dev.env.NODE_ENV)
}

const opn = require('opn')
const path = require('path')
const express = require('express')
const webpack = require('webpack')
const proxyMiddleware = require('http-proxy-middleware')
const getDevConfig = require('./webpack.dev.conf')
const webpackConfig = getDevConfig({moduleName:process.argv[2]}||new Error());

 const getDevConfig = require('./webpack.dev.conf')引入webpack配置文件

3、webpack配置文件

webpack.dev.config文件合并baseWebpackConfig基本配置文件

 baseWebpackConfig基本配置文件

baseConfig文件会有入口、出口的配置，还可以配置loader、plugin（可选）

入口文件需要是js文件（一般是main.js），main.js会导入App.vue文件

import Vue from 'vue'
import App from './App'
import router from './router'

new Vue({
  el: '#app',
  router,
  template: '<App/>',
  store,
  components: {
    App
   }
})

 webpack.dev.config的plugins配置中会指定index.html作为输出文件的模板文件

new HtmlWebpackPlugin({
        filename: 'index.html',
        template: 'module/' + config.dev.index + '/index.html',
        inject: true
      })