Webpack4.x 初步配置 vue 项目

说明

参考vue-cli webpack模板, 用 webpack4.x配置了vue项目

开始

与browserify不同,webpack是配置式的,所以我会先把配置文件写上,并在文件里面写好注释

项目结构

|-- webpack-demo
|   |-- build
|   |   |-- webpack.base.conf.js
|   |   |-- webpack.dev.conf.js
|   |   |-- webpack.prod.conf.js
|   |-- node_modules
|   |-- dist
|   |-- src
|       |-- components
|           |-- Hello.vue
|       |-- main.js
|   -- babelrc
|   -- index.html
|   -- package.json
|   -- README.md

package.json

/* webpack webpack-cli 我装在全局了,没有安装的请自行安装  */
{
  "name": "webpack-demo",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "build": "cross-env NODE_ENV=production webpack --config build/webpack.prod.conf.js",
    "dev": "cross-env NODE_ENV=development webpack-dev-server --config build/webpack.dev.conf.js"
  },
  "keywords": [],
  "author": "",
  "license": "MIT",
  "dependencies": {
    "vue": "^2.5.17"
  },
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-env": "^1.7.0",
    "babel-runtime": "^6.26.0",
    "cross-env": "^5.2.0",
    "css-loader": "^1.0.0",
    "friendly-errors-webpack-plugin": "^1.7.0",
    "html-webpack-plugin": "^3.2.0",
    "mini-css-extract-plugin": "^0.4.2",
    "optimize-css-assets-webpack-plugin": "^5.0.0",
    "style-loader": "^0.22.1",
    "uglifyjs-webpack-plugin": "^1.3.0",
    "vue-loader": "^15.4.1",
    "vue-template-compiler": "^2.5.17",
    "webpack-merge": "^4.1.4"
  }
}

公共配置

  /* build/webpack.base.conf.js */
  'use strict'
  const path = require('path')
  /*
   * 引入vue-loader plugin
   * 好像是新版本的vue-loader 需要这样处理
   * https://vue-loader.vuejs.org/guide/#vue-cli
   */
  const VueLoaderPlugin = require('vue-loader/lib/plugin')
  /*
   * MinnCssExtractPlugin 可将 css 分离, 主要用于生产环境css的分离
   * 取代 extract-text-webpack-plugin,
   * 如果 webpack4 使用 extract-text-webpack-plugin的话,请使用
   * extract-text-webpack-plugin@next,据说是作者在忙,未及时更新,社区临时使用这个
   * https://webpack.js.org/plugins/mini-css-extract-plugin/
   */
  const MiniCssExtractPlugin = require('mini-css-extract-plugin')
  const dev = process.env.NODE_ENV !== 'production'
  module.exports = {
    /* 设置入口根目录 */
    context: path.resolve(__dirname, '..'),
    entry: {
      app: './src/main.js'
    },
    output: {
      path: path.resolve(__dirname, '../dist'),
      filename: '[name].js'
    },
    /*
     * 解析 vue
     * import Vur from 'vue' 实际上是
     * import Vue from 'vue/dist/vue.esm.js'
    */
    resolve: {
      alias: {
        'vue': 'vue/dist/vue.esm.js'
      }
    },
    module: {
      rules: [
        /*  处理.vue文件  */
        {
          test: /\.vue$/,
          loader: 'vue-loader',
          include: [path.resolve(__dirname, '../src')]
        },
        /* babel 转码 */
        {
          test: /\.js$/,
          loader: 'babel-loader',
          include: [path.resolve(__dirname, '../src')]
        },
        /* 处理 css */
        {
          test: /\.css$/,
          loaders: [
            dev ? 'style-loader' : MiniCssExtractPlugin.loader,
            'css-loader'
          ],
          include: [path.resolve(__dirname, '../src')]
        }
      ]
    },
    plugins: [
      /* 好像是新版vue-loader 需要引入这个 */
      new VueLoaderPlugin()
    ]
  }

开发环境

  /* build/webpack.dev.conf.js */
  'use strict'
  const webpack = require('webpack')
  const BaseWebpackConf = require('./webpack.base.conf')
  const path = require('path')
  const merge = require('webpack-merge')
  const HtmlWebpackPlugin = require('html-webpack-plugin')
  const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin')

  module.exports = merge(BaseWebpackConf, {
    /*
     * mode webpack4新内容
     * development：开启 NamedChunksPlugin 和 NamedModulesPlugin
     * production:FlagDependencyUsagePlugin,
     *            FlagIncludedChunksPlugin,
     *            ModuleConcatenationPlugin 作用域提升
     *            NoEmitOnErrorsPlugin, 不报错
     *            OccurrenceOrderPlugin,
     *            SideEffectsFlagPlugin
     *            UglifyJsPlugin. js压缩
     * 默认为 production
     */
    mode: 'development',
    /*
     *  按照什么方式生成代码
     *  https://webpack.js.org/configuration/devtool/
     */
    devtool: 'cheap-module-eval-source-map',
    /*
     * 配置本地服务器
     * https://webpack.js.org/configuration/dev-server/
     */
    devServer: {
      quiet: true,
      clientLogLevel: 'warning',
      historyApiFallback: {
        rewrites: [
          {
            from: /.*/,
            to: path.resolve(__dirname, '../dist/index.html')
          }
        ]
      },
      contentBase: path.resolve(__dirname, '../dist'),
      inline: true,
      progress: true,
      hot: true,
      compress: true,
      open: true,
      proxy: {}
    },
    plugins: [
      /* 热更新
       * https://webpack.js.org/guides/hot-module-replacement/
      */
      new webpack.HotModuleReplacementPlugin(),
      /*
       * html 模板
       * 把生成的资源插入到模板中,生成新的页面,避免手动管理资源
       * https://webpack.docschina.org/plugins/html-webpack-plugin/
       */
      new HtmlWebpackPlugin({
        filename: 'index.html',
        template: path.resolve(__dirname, '../index.html')
      }),
      /*
       * 错误友好提示
       * 如果代码出错了,控制台会显示错误,排版挺好看的
       * http://npm.taobao.org/package/friendly-errors-webpack-plugin
       */
      new FriendlyErrorsWebpackPlugin({
        compilationSuccessInfo: {
          messages: [
            'your application is running here http://localhost:8080 '
          ]
        }
      })
    ]
  })

生产环境

'use strict'
const webpack = require('webpack')
const merge = require('webpack-merge')
const BaseWebpackConf = require('./webpack.base.conf')
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
module.exports = merge(BaseWebpackConf, {
  mode: 'production',
  devtool: '#source-map',
  output: {
    path: path.resolve(__dirname, '../dist'),
    filename: 'static/js/[name].[chunkhash].js',
    chunkFilename: 'static/js/[id].[chunkhash].js'
  },
  /*
   * optimization 是 webpack4改动最大的地方了,
   * https://webpack.js.org/configuration/optimization/
   */
  optimization: {

    runtimeChunk: {
      name: 'manifest'
    },
    /*
     * minizer: 默认开启 new UglifyJsPlugin()
     * 对 css 压缩的话, 需要重写 minizer
     */
    minimizer: [
      /*
       * js 压缩
       * https://webpack.js.org/plugins/uglifyjs-webpack-plugin/
       */
      new UglifyJsPlugin({
        cache: true,
        parallel: true,
        sourceMap: true
      }),
      /*
       * css 压缩
       * https://www.npmjs.com/package/optimize-css-assets-webpack-plugin
       */
      new OptimizeCssAssetsPlugin({})
    ],
    splitChunks: {
      /*
       * 分离第三方资源
       */
      cacheGroups: {
        vendor: {
          name: 'vendor',
          chunks: 'all',
          priority: -10,
          reuseExistingChunk: false,
          test: /[\\/]node_modules[\\/]/
        }
      }
    }
  },
  plugins: [
    /*
     * 将css分离出来
     */
    new MiniCssExtractPlugin({
      filename: 'static/css/app.[name].css',
      chunkFilename: 'static/css/app.[contenthash].css'
    }),
    /*
     * html 模板
     */
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: path.resolve(__dirname, '../index.html'),
      minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeAttributeQuotes: true
      }
    }),
    /*
     * 之前不是很理解这个插件的用法，后来看了这篇文章
     * 主要是讲多次构建代码的时候 如何做处理好缓存
     *  https://medium.com/webpack/predictable-long-term-caching-with-webpack-d3eee1d3fa31
     */
    new webpack.HashedModuleIdsPlugin()
  ]
})

babel 配置

/* .babelrc */
{
  "presets":[
    [
      "env",{
          "modules":false,
      }
    ]
  ],
  "plugins":["transform-runtime"]
}

webpack4.0配置开发环境还是挺简单的,引入一些loader,再引入html-webpack-plugin,friendly-errors-webpack-plugin,
配置一下生产服务器,启用热更新,基本就可以了。配置生产环境就相对麻烦一点,代码要分离提取压缩,还要考虑分块打包
,异步加载，再次构建时缓存处理等问题。相比browserify,webpack上手确实难啊,官网有些资料也更新慢了，断断续续看了几天,查了好多资料,还不是特别理解,
还需要继续琢磨吧。

文档

webpack

Predictable long term caching with Webpack

webpack4.0实战那些事儿

webpack4.x配置指南

Webpack4.x 初步配置 vue 项目

说明

开始

项目结构

公共配置

开发环境

生产环境

babel 配置

心得

文档

推荐文章：

社区赞助商

关于 LearnKu

资源推荐

服务提供商

其他信息

Webpack4.x 初步配置 vue 项目

说明

开始

项目结构

公共配置

开发环境

生产环境

babel 配置

心得

文档

推荐文章：

社区赞助商

关于 LearnKu

资源推荐

服务提供商

其他信息

请登录