如何用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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • 详解webpack与SPA实践之开发环境搭建

    目前,公司前端项目开发技术栈基本改造为使用gulp进行自动化构建,webpack进行项目模块化依赖管理,Vue+ Vuex + Vue-Router作为项目组件化开发框架,为了更深入的理解.使用当前技术栈并与读者分享.交流,计划推出一系列相关学习与实践文章.本篇为开篇,主要讲述如何使用webpack搭建开发环境. 项目初始化 以你喜欢的任意方式,创建项目根目录,如: mkdir vue-hello 初始化包模块管理文件 进入项目根目录,初始化项目包模块管理文件package.json: npm

  • webpack4.x开发环境配置详解

    本文实例讲述了webpack4.x开发环境配置方法.分享给大家供大家参考,具体如下: 写这篇文章的初衷在于,虽然网络上关于webpack的教程不少,但是大多已经过时,由于webpack版本更新后许多操作变化很大,很多教程的经验已经不适合.当我们使用npm安装webpack时,若不指定webpack的版本,将默认安装最新版,笔者测试时默认安装的是4.1.1,并不能照搬老教程的方法.为此,笔者进行了最新版配置的探索,使用的是windows操作系统,如果你的是webpack4.x版本,可参考进行配置.

  • 详解基于webpack搭建react运行环境

    最近由于项目需要,所以尝试使用webpack搭建react运行环境,在克服了一系列困难后,终于能在页面输出"Hello World",特地把整个过程记录下来,利人利己. 首先我创建了一个文件夹webpack-helloworld-demo,之后的大部分操作都会在这个文件夹下进行. 1.初始化文件夹 npm init //初始化一个package.json文件 git init //产生.git文件,便于之后版本提交回退 2.搭建webpack环境 npm install webpack

  • 浅谈Webpack下多环境配置的思路

    前言 由于前后端分离的前端应用脱离了后端的支持,在单独开发前端应用时,页面调试时使用固定的开发环境地址还好,如果出现在本地开发时需要调试不同环境的远端API,或者需要将应用部署到不同环境的服务器上时,如果不将这些环境对应的服务器地址.环境专属变量等单独配置,也许每次切换环境都需要修改大量代码.网上关于这部分的资料较少,所以下面将以用vue-cli init命令生成的Vue/Webpack项目作为例子,介绍一下我当前正在使用的简单的多环境配置的思路. 1.理想中的多环境配置 在后端开发中,项目中不

  • vue+node+webpack环境搭建教程

    一.环境搭建 1.1.去官网安装node.js(http://www.runoob.com/nodejs/nodejs-install-setup.html ) 注意node的版本,只有支持和谐模式的node才会支持es6,在基于webpack构建项目名称时才不会报错.推荐最新版本. 下载安装包之后直接点击安装即可.测试安装成功的界面如下: 1.2.利用npm安装webpack命令行语句为npm install webpack -g.测试安装成功的界面如下: 1.3.下面就是安装淘宝镜像,如下图

  • webpack入门+react环境配置

    小结放在前:这篇文章主要是为下一篇的react提前铺好路,webpack是一个前端资源模块化管理和打包工具,说白了就是方便我们管理自己的常用的一些代码,比如你开发中用到sass以及jade同时用到es6,开发时你不可能改动某个地方就挨个命令去转换在到浏览器去看效果,那样效率是非常低的.所以webpack帮我们省去了那些多余的步骤 webpack 基本安装 开始前还是万万不能缺少的安装: npm install webpack -g 安装完接着是建个文件夹新建一个package.json依赖管理文

  • 详解webpack4多入口、多页面项目构建案例

    趁工作之余从零构建了一个webpack4.x多页面应用程序.过程中也遇到一些坑,就记录下来了. webpack核心概念 Entry:入口,Webpack 执行构建的第一步将从 Entry 开始. Module:模块,在 Webpack 里一切皆模块,一个模块对应着一个文件.Webpack 会从配置的 Entry 开始递归找出所有依赖的模块. Chunk:代码块,一个 Chunk 由多个模块组合而成,用于代码合并与分割. Loader:模块转换器,用于把模块原内容按照需求转换成新内容. Plugi

  • webpack 2.x配置reactjs基本开发环境详解

    本文介绍了webpack 2.x配置reactjs基本开发环境详解,分享给大家,具体如下: 当前webpack版本:2.2:react: 15.4.2 webpack从1.x升级到2.x替换了几个接口,包括module.loaders这样的重要接口已被弃用(详细变更).官网目前已不推荐使用1.x版本,早上折腾一番,根据2.2版本配置了react基本的开发环境,满足不太复杂的web应用开发,后期会逐步优化配置文件. 如果您之前使用过webpack,需要改动的地方并不大.下文假定您没有接触过类似的打

  • karma+webpack搭建vue单元测试环境的方法示例

    最近做了一次关于vue组件自动化测试的分享,现在将vue组件单元测试环境搭建过程整理一下.这次搭建的测试环境和开发环境隔离,所以理论上适用所有使用vue的开发环境. 准备 这篇文章的重点在于搭建测试环境,所以我随便写了个webpack的vue开发环境. 代码地址:https://github.com/MarxJiao/vue-karma-test 目录结构如下 目录结构 app.vue和child.vue代码 app.vue child.vue 运行效果如下: 运行效果 测试环境搭建 注意:这里

  • windows下vue-cli及webpack搭建安装环境

    1.安装Node.js,node.js安装包及源码下载地址为:https://nodejs.org/en/download/. 2.安装npm,由于新版的nodejs已经集成了npm,所以之前npm也一并安装好了.同样可以通过输入 "npm -v" 来测试是否成功安装.命令如下,出现版本提示表示安装成功: $ npm -v 3.10.8 如果你安装的是旧版本的 npm,可以很容易得通过 npm 命令来升级,命令如下: npm install npm -g 你可以使用淘宝定制的 cnpm

  • 详解webpack+angular2开发环境搭建

    刚搭建完一个webpack+angular2环境,由于angular及webpack官网上没有一个折中的搭建方案,所以只能摸索着搭建,中间遇到一些坑,遂总结记录下来,以供交流. 搭建完后的项目初步环境如下: app ----app.component.ts ----app.module.ts ----main.ts index.html package.json tsconfig.json webpack.config.js app.componnet.ts:组件文件.angular2应用是由组

随机推荐