如何优雅的自配Vue2.6.10+webpack4.29.6？

     webpack4与vue2.6已经出来一段时间了，忙于业务一直没有时间作升级，cli又不能知足业务上的需求，决定抛弃脚手架手撸一个最新的基于vue的webpack项目。

1.首先先建立一个文件夹，输入命令

npm init
复制代码

二、下载webpack4 与 webpack CLI

一系列操做以后，package包出现了，咱们先下载关于webpack的依赖包，输入指令。

npm i webpack webpack-cli webpack-dev-server -D
复制代码

三、下载vue、vue-route、vuex

npm i vue vue-router vuex //生产依赖
npm i vue-template-compiler vue-loader vue-style-loader -D //开发依赖
复制代码

四、配置关于vue的文件

五、建立webpack.config.js并配置package脚本

首先咱们在根目录建立webpack.config.js

module.exports = {
  entry: 'main.js', // 入口文件，也就是打包这个js文件
  output: {  // 打包的文件位置
    filename: 'bundle.[hash:8].js', //当js文件更改， [hash]的值会变化，每次build会生成一个新的js文件，[hash:8]，只显示8位的hash值，打包出来固然文件名叫 bundle.js
    path: path.resolve(__dirname, 'jycloud'), //resolve() 能够把相对路径解析成绝对路径， __dirname 是当前目录，路径必须是一个绝对路径，相对于根目录
  }
}
复制代码

为了方便操做咱们先配置webpack脚本

"scripts": {
    "build": "webpack --config webpack.config.js",
    "dev": "webpack-dev-server",
    "start": "npm run dev"
  }
复制代码

六、配置webpack服务

devServer: { // 开发服务器的配置
    port: 3000,
    progress: true, // 编译的进度条
    contentBase: path.join(__dirname, 'static'), // 以static目录为默认启动目录
    compress: true, // 自动压缩
    open: true,// 自动打开浏览器
  }
复制代码

七、配置html。

前期工做铺垫好了，咱们先开始配置html，先下载

npm i html-webpack-plugin  -D
复制代码

而后咱们进行webpack.config.js的配置。

const HtmlWebpackPlugin = require('html-webpack-plugin')//html分离
复制代码

plugins: [  // 数组,放着全部的webpack插件
    new HtmlWebpackPlugin({
      template: 'index.html', // 注意路径为根目录下的路径
      filename: 'index.html', // 打包后也叫作 index.html
      minify: {     // 压缩这个html文件(主要是对HTML文件进行压缩)
        removeAttributeQuotes: true,        // 删除这个html文件的双引号
        collapseWhitespace: true      // 变成一行
      },
      hash: true
    })
]
复制代码

八、配置css。

npm i style-loader css-loader less less-loader postcss-loader autoprefixer -D
npm i mini-css-extract-plugin optimize-css-assets-webpack-plugin  -D
复制代码

而后咱们进行webpack.config.js的配置。

const MiniCssExtractPlugin = require('mini-css-extract-plugin')//这个插件的主要做用是实现css分离
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')// 这个插件做用是对单独抽离出来的css文件进行压缩。
复制代码

module: { // 模块loader 默认是从右到左，从下到上执行,多个loader须要一个数组，loader是有顺序的，默认是从右向左执行，loader还能够写成 对象方式
    rules: [
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader, // 把样式都抽离成一个单独的css文件
          "css-loader",
          "postcss-loader"//给CSS3语法，好比transfrom加上前缀， 须要新建 postcss.config.js 配置文件，须要引用 autoprefixer 这个插件
        ]
      },
      {
        test: /\.less$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader', // 解析 @import这种语法的
          'postcss-loader',
          'less-loader' // 把less转变为css
        ]
      }
    ]
  }
复制代码

plugins: [  // 数组,放着全部的webpack插件
  new MiniCssExtractPlugin({
    filename: 'jycloud.css'
  }),
  new OptimizeCSSAssetsPlugin({
    cssProcessor: require('cssnano'), //引入cssnano配置压缩选项
    cssProcessorOptions: {
      discardComments: { removeAll: true }
    },
    canPrint: true//是否将插件信息打印到控制台
  })
]
复制代码

postcss.config.js配置

module.exports = {
plugins: [require('autoprefixer')]//  // 须要用到 autoprefixer插件
}
复制代码

九、配置图片

npm i url-loader file-loader -D
npm i html-withimg-loader -D //处理html填入图片
复制代码

而后咱们进行webpack.config.js的配置。

module: { 
    rules: [
      {
        test: /\.html$/,    // 找到html文件
        use: 'html-withimg-loader'//解决html引入图片打包的问题
      },
      {
        test: /\.(png|jpg|gif)$/,       // 找到全部的图片
        use: {// 作一个限制，当咱们的图片，小于多少k的时候，用base64来转化，不然用file-loader产生真实的图片
          loader: 'url-loader',
          options: {
            limit: 200 * 1024   // 小于200k，会转化成base64
          }
        }
      },
     ]
  }
复制代码

十、配置js

npm i @babel/core @babel/preset-env @babel/plugin-proposal-decorators @babel/plugin-proposal-class-properties @babel/plugin-transform-runtime -D
复制代码

而后咱们进行webpack.config.js的配置。

module: { 
    rules: [
      {
        test: /\.js$/,  // 找到全部的js文件
        use: {
          loader: 'babel-loader', // 用babel-loader，须要把ES6转换成ES5语法
          options: {
            presets: [ // babel的集合
             '@babel/preset-env'    // @babel/preset-env 就是用来将ES6转化成ES5语法的
            ],
            plugins: [
              ['@babel/plugin-proposal-decorators', {'legacy': true}],   // 将ES7语法中的类装饰器转换成ES5语法， legacy 是宽松模式
              ['@babel/plugin-proposal-class-properties', {'loose': true}],  // 将ES7语法中的类转换成ES5语法
              '@babel/plugin-transform-runtime'//避免编译出现重复
            ]
          }
        },
        include: path.resolve(__dirname, 'src'),// 只查找src目录下的js，不找node_modules里面的js
      },
     ]
  }
复制代码

十一、配置vue

const VueLoaderPlugin = require('vue-loader/lib/plugin');//VueLoaderPlugin,注意路径必定是('vue-loader/lib/plugin')，而不是('vue-loader')，否则会报错
复制代码

module: { 
    rules: [
    {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
     ]
}
复制代码

plugins: [
    new VueLoaderPlugin()
]
复制代码

十二、webpack.config.js单独放入文件夹。

目前的webpack.config.js在根目录

为了美观，咱们把它放到单独的文件夹中

这样咱们的路径须要发生变化，先配置脚本

再配置出入口

1三、webpack.config.js总结构

结语

零零散散的时间配置了这个webpack，总算是大功告成。可能还有许多不足，欢迎指正。

微信公众号：麦坤小子。

github：github.com/Wpfsxauer/w…