用webpack4.17版本手动配置vue的项目_webpack版本对应的vue-CSDN博客

###一使用webpack最新版本配置的初衷 ##
现在webpack的版本已经升级到了4.0以上版本，增加了许多好用的功能，但是我们的vue-cli脚手架的webpack版本还是之前的3.0+的版本，许多功能已经被4.0所放弃了，现在webpack的4.0版本比较成熟，可以运用在项目中。

二目录结构##

这里写图片描述
###三现在开始配置 ##

1.首先安装webpack 和 webpack文件的脚手架

npm install webpack webpack-cli -D  //或者
cnpm install webpack webpack-cli -D  //这个需要安装淘宝镜像  没安装的话不能用 需要自己去装一下
//安装好了会出现两个文件  node_modules和package.json文件
//然后就是初始化项目
npm init //初始化命令
//然后会出现
package name:(vue-cli)//项目的名称 然后回车会出现
version: (1.0.0)//项目的初始版本号 然后回车
description://项目的描述 可以不用写 直接回车
entry point: (index.js)//项目默认的入口文件 直接回车
test command: //这个不用管 直接回车
git repository://git 提交相关的 不用管 直接回车
keywords://项目的关键字  可以写 也可以不写 直接回车
author: //项目的作者  可以写也可以不写  直接回车
license: (ISC)//开源协议  不用管直接回车
//然后会出现很多东西  代表你已经成功了 然后
Is this ok? (yes)//直接yes 下一步

2新建两个文件夹 src 和 build两个文件夹

这里写图片描述
3现在我们来配置webpack.common.js的公用配置

!!!注意 babel-loader的版本对应关系千万别弄错了
这里写图片描述

const path=require('path')//引入node的路径
const CopyWebpackPlugin = require('copy-webpack-plugin')//复制粘贴文件的插件 npm install copy-webpack-plugin -D 来安装
const MiniCssExtractPlugin = require("mini-css-extract-plugin")//抽离css的插件 npm install mini-css-extract-plugin -D 来安装
const VueLoaderPlugin = require('vue-loader/lib/plugin')///vueloader一个神奇的插件
const HappyPack = require('happypack')//webpack默认在node上面是单进程 所以我们打包时间比较慢 我们可以用这个文件来配置多进程 提高效率 优化webpack  npm install happypack -D 来安装
const os = require('os');//配和happypack插件来用 npm install os -D 来安装
const happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length })//获取cpu的数量
function resolve (dir) {//路径封装的函数
    return path.join(__dirname, '..', dir)
  }

const createLintingRule = () => ({//语法检测的加载器
    test: /\.(js|vue)$/,
    loader: 'eslint-loader', //npm install eslint-loader -D来安装 
    enforce: 'pre',
    include: [resolve('src'), resolve('test')],//需要对那些文件进行语法检测
    options: {
      formatter: require('eslint-friendly-formatter'),//错误输出的格式 npm install eslint-friendly-formatter -D 
      emitWarning: true
    }
  })
const webpackConfig={
    context: path.resolve(__dirname, '../'),//入口文件的路径
    entry:{
       app:'./src/index.js', //主入口文件
       main:'./src/main.js',//副入口文件
    },
    output:{
        filename:'static/js/[name].js',//出口文件名称
        path:path.resolve(__dirname,'../dist'),//出口路径
        chunkFilename:'static/js/pages/[name].js',//分成块的打包地址会打包在static/js/pages文件下面
        publicPath:'/'//公共路径
    },
    optimization:{//4.0新增的配置项
        splitChunks:{
            chunks:'all',//插件作用的范围 all全部, async按需加载, initial入口文件 三选一
            minSize: 30000,//最小打包的尺寸  超过30kb才会打包
            minChunks:1,/