Skip to content
一步一步用webpack4实现一个vue的打包的项目,每一个commit对应一个步骤。
JavaScript Vue HTML CSS
Branch: master
Clone or download
Latest commit 780f578 Aug 3, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
build publicPath Aug 2, 2019
dll feat: ui Aug 3, 2019
src css Aug 3, 2019
static static Jun 25, 2018
.babelrc 新优化点 Jun 10, 2019
.editorconfig 初始化项目,用vue-loader打包.vue文件 Jun 19, 2018
.eslintcache 检查版本,优化打包输出和Eslint设置 Jun 19, 2018
.eslintignore 检查版本,优化打包输出和Eslint设置 Jun 19, 2018
.eslintrc.js 新优化点 Jun 10, 2019
.gitignore package.json Jun 21, 2019
.postcssrc.js 配置热加载、代理等开发环境 Jun 19, 2018
README.md 打包优化 Jun 19, 2018
index.html feat: ui Aug 3, 2019
package.json feat: ui Aug 3, 2019
server.js feat: ui Aug 3, 2019
yarn-error.log 配置热加载、代理等开发环境 Jun 19, 2018
yarn.lock package.json Jun 21, 2019

README.md

nvue

一个用webpack4打包的vue 的项目,参照vue-cliwebpack配置,一步一步带你实现一个vue的打包的项目,每一个commit对应一个步骤。

clone project

git clone git@github.com:naihe138/nvue.git

install

npm install or yarn

一、初始化项目,对应第一次commit

初始化项目,用vue-loader来打包.vue文件,html-webpack-plugin插件来导出html文件。 第一步我们很简单,就利用vue-loaderbabel-loader是把.vue文件打包出来,总共才40多行代码,看build/webpack.base.conf.js文件注释就看的懂。+++表示有省略的代码

module.exports = {
  +++
  // 模块,loader
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        exclude: /node_modules/,
        include: resolve('src')
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        include: resolve('src')
      }
    ]
  }
  +++
}

运行 webpack --config build/webpack.base.conf.js

二、打包css和图片等资源,对应第二次commit

这里打包csssass 为例,用到了mini-css-extract-plugin插件提取css,用url-loader来处理字体、图片、音频等资源。非常简单。如下代码,+++表示有省略的代码

+++
module.exports = {
  +++
  // 模块,loader
  module: {
    rules: [
      +++
      {
        test: /\.s?css$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          'sass-loader'
        ]
      },
      {
        test: /.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: 'static/img/[name].[hash:7].[ext]'
        }
      }
      +++
    ]
  },
  // 插件
  plugins: [
    +++
    new MiniCssExtractPlugin({
      filename: 'static/css/[name].[hash].css',
      chunkFilename: 'static/css/[name].[hash].css'
    })
  ]
}

运行 webpack --config build/webpack.base.conf.js

三、配置热加载、代理等开发环境,对应第三次commit

通过build/config.js来设置开发配置。如下注释

const path = require('path')

module.exports = {
  dev: {
    assetsSubDirectory: 'static', // 静态文件目录
    assetsPublicPath: '/', // 相对文件路径
    proxyTable: {},
    host: 'localhost',
    port: '8000',
    autoOpenBrowser: false, // 是否自动打开浏览器
    errorOverlay: true, // 浏览器错误提示遮罩层
    notifyOnErrors: true, // 编译错误的时候通知提示,需要friendly-errors-webpack-plugin 配合
    poll: false,
    useEslint: true, // 便宜使用eslint-loader模块
    showEslintErrorsInOverlay: false, // eslint浏览器错误提示遮罩层
    devtool: 'cheap-module-eval-source-map', // Source Maps
    cssSourceMap: true, // css Source Maps
    cacheBusting: false, // vue debugg 提示
  }
}

webpack.dev.conf.js中,通过webpack-dev-server 插件来开启热重载服务,同时配置自动补全css兼容代码的插件,postcss-loader

运行npm run dev 或者 yarn dev 就可以启动服务了

四、配置打包环境,对应第四次commit

通过build/config.js来设置开发配置。如下注释

const path = require('path')

module.exports = {
  +++
  build: {
    // html模板
    index: path.resolve(__dirname, '../dist/index.html'),
    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    // 生产环境的souce map
    productionSourceMap: false,
    devtool: '#source-map',
    // 开启静态文件的Gzip压缩
    // 如果是true 的话  需要 npm install --save-dev compression-webpack-plugin
    productionGzip: false,
    productionGzipExtensions: ['js', 'css'],

    // 打包完成显示包大小的状态分析
    // `npm run build --report`
    bundleAnalyzerReport: process.env.npm_config_report
  }
}

运行npm run build 或者 yarn build 就可以实现打包vue项目啦。

五、检查版本,优化打包输出和Eslint设置,对应第五次commit

check-version.js中用 shelljs 模块检查时候有npm命令, semver模块语义化版本号,然后在build.js合并webpack.prod.conf.js的的配置,然后组在格式化输出。

// 检查时候有安装npm命令
if (shell.which('npm')) {
  versionRequirements.push({
    name: 'npm',
    currentVersion: exec('npm --version'),
    versionRequirement: packageConfig.engines.npm
  })
}

// 格式化输出
process.stdout.write(stats.toString({
  colors: true,
  modules: false,
  children: false,
  chunks: false,
  chunkModules: false
}) + '\n\n')

通过eslint-loader 来配置eslint的检查,建立.eslintrc.js去设置规则

{
  test: /\.(js|vue)$/,
  loader: 'eslint-loader',
  enforce: 'pre',
  include: [resolve('src')],
  exclude: /node_modules/,
  options: {
    formatter: require('eslint-friendly-formatter'),
    emitWarning: !config.dev.showEslintErrorsInOverlay
  }
},

六、打包优化,对应第六次commit

1、添加DllPluginDllReferencePlugin来打包优化不变的库, 2、通过cache-loader来做loader的缓存, 3、通过UglifyJsPluginparallel来开启多线程打包

先运行npm run dll 然后 npm run build

You can’t perform that action at this time.