如何用webpack4带你实现一个vue的打包的项目


            一个用webpack4打包的vue 的项目，参照vue-cli的webpack配置，

一步一步带你实现一个vue的打包的项目，每一个commit对应一个步骤。

github 地址



clone project







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



install







npm install or yarn



一、初始化项目



初始化项目，用vue-loader来打包.vue文件，html-webpack-plugin插件来导出html文件。



第一步我们很简单，就利用vue-loader 和 babel-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和图片等资源



这里打包css以sass 为例，用到了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

三、配置热加载、代理等开发环境



通过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 就可以启动服务了

四、配置打包环境



通过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设置



在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

 }

},





六、打包优化



1、添加DllPlugin和DllReferencePlugin来打包优化不变的库，

2、通过cache-loader来做loader的缓存，

3、通过UglifyJsPlugin的parallel来开启多线程打包

先运行npm run dll 然后 npm run build

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持中文源码网。