搭建vue脚手架基于webpack与express

json文件运行配置

"scripts": {
    "dev": "node index.js"
  },

index.js文件

var opn = require('opn') // 打开浏览器
var path = require('path') // 路径模块
var express = require('express') // express框架 
var webpack = require('webpack') //核心模块webpack

var webpackConfig = require('./webpack.config')// 配置文件


var port = webpackConfig.devServer.port


var app = express()
var compiler = webpack(webpackConfig)

var devMiddleware = require('webpack-dev-middleware')(compiler, {
  publicPath: webpackConfig.output.publicPath,
  quiet: true
})

var hotMiddleware = require('webpack-hot-middleware')(compiler, {
  log: false,
  heartbeat: 2000
})

app.use(require('connect-history-api-fallback')()) 
//开启 支持history路由


app.use(devMiddleware) // 服务器webpack插件


app.use(hotMiddleware) // 热加载自动打包


app.use('./static', express.static('./static'))

var uri = 'http://localhost:' + port

var _resolve
var readyPromise = new Promise(resolve => {
  _resolve = resolve
})

console.log('> Starting dev server...')
devMiddleware.waitUntilValid(() => {
  console.log('> Listening at ' + uri + '\n')
  
  if (process.env.NODE_ENV !== 'testing') {
    opn(uri)
  }
  _resolve()
})

var server = app.listen(port)

module.exports = {
  ready: readyPromise,
  close: () => {
    server.close()
  }
}

webpack配置文件 entry: ['webpack-hot-middleware/client', './src/index.js'],

const path=require("path")
const HtmlWebpackPlugin=require("html-webpack-plugin")//用于把HTML页面放入内存
const {CleanWebpackPlugin} = require('clean-webpack-plugin')
const vueload=require("vue-loader/lib/plugin")
const minicss=require("mini-css-extract-plugin")//webpack4.0以后的打包css文件
const optimizecssassetswebpackplugin=require("optimize-css-assets-webpack-plugin")//压缩如果你使用ui组件库已经压缩的css就别必要了
const webpack = require("webpack")
const clernWebpackPlugin = require('clean-webpack-plugin')
const htmlplugin=new HtmlWebpackPlugin({
    template:path.join(__dirname,'./src/index.html'),//源头文件
    filename:"index.html",//生成首页的文件名称
    minify: {
        removeAttributeQuotes: true,
        collapseWhitespace: true
    }
})
const css=new minicss({//输出css独立文件
    filename:"./css/[name].css",
    chunkFilename:"[name].css"//或者id
})
module.exports={//webpack基于node构建的
    mode: "development", 
    entry: ['webpack-hot-middleware/client', './src/index.js'],  
    output: {
        filename: 'main.[hash:8].js',//通过热加载输出script文件挂载在目录与index.HTML一样
        path: path.resolve(__dirname, 'dist')
    },
    watch: true,
    watchOptions:{
        poll:1000,
        // aggregateTimeOut: 500,
        ignored: /node_modules/
    },
    //production 提供了约定大于配置 约定打包文件是src/index ->dist/main
    plugins:[
        htmlplugin,
       new vueload() ,
       new CleanWebpackPlugin(),
       css,
       new webpack.HotModuleReplacementPlugin()
    //    new clernWebpackPlugin('./dist')
     ],
    module: {//所以第三方模块的配置规则
        rules: [   
           
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude:/node_modules/
              },
              {
                test: /\.scss$/,
                // use: [
                //   'vue-style-loader',
                //   'css-loader',
                //   'sass-loader'
                // ]
                
                use:[{loader:minicss.loader}, {
                    loader: 'css-loader',
                    options: { modules: true }
                  },'sass-loader']
              },
              {
                test: /\.ts$/,
                loader: 'ts-loader',
                options: { appendTsSuffixTo: [/\.vue$/] },
                exclude:/node_modules/
              },
              {
                test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
                loader: 'url-loader',
                options: {
                  limit: 10000
                  
                }
              },
            // { test:/\.js|\jsx$/,use:[{loader:"babel-loader",options:{cacheDirectory:true}}],exclude:/node_modules/},//一个属性use:"babel-loader"两个是数组
            // // { test:/\.css/,use:['style-loader','css-loader']},
            {test:/\.css$/,use:[{loader:minicss.loader},'css-loader']},
         //     { test:/\.scss/,use:['style-loader',  {loader: "css-loader",
         //     options: {//这个是react的css模块化
         //        modules: {
         //            localIdentName: "[path][name]-[local]-[hash:5]"
         //        }//import css from '路径' console.log(css)会生成模块
         //        //这是react的处理办法 vue就是style里面写scoped
         //        //支持id与class 控制台输出的模块是健对值形式
         //     }//css scss less一样的配置模块化
         //    }]},
             { test:/\.(jpg|PNG|png|jpeg)/,use:[{loader:"url-loader",options:{
                 outputPath:"images/",
                 limit:1024,//单位是B 大于这个会打包出来
                 name:"[name].[ext]"
             }}]},                    
               { test:/.vue$/,use:[{loader:"vue-loader"}]},
               
           ]   
        },
        devtool:"hidden-source-map",//inline把js打包在一个文件里面 hidden分离出来 eval也是分离 
        optimization:{//代码分割 下面vendors就是分割代码之后(把相同的库或者文件都提出来打包) 你可能在想css文件去哪了 你注销代码分割 你可以看见css文件夹
            splitChunks:{
                chunks:"all"
            }
        },
        resolve: {
            // 将 `.ts` 添加为一个可解析的扩展名。
            extensions: ['.js','.vue','.ts','.json']
        },
        devServer: {
            port: 8080,
            hot: true,
            grogress: true,
            historyApiFallback: true 
            //true 表示webpack支持使用history false路由默认是hash
        }   
}

src/index.js

import Vue from 'vue'
import app from './router.vue'
Vue.config.productionTip = false
new Vue({
  el: '#app', 
  render: function (h) {
    return h(app)
  }
});