vue-cli配置预编译

KnewOne 发布于2019-08-22 18:13 / 2456人阅读

摘要：转载文章公司的平台功能越堆越多，打包也越来越费劲，一次十几分钟，运维很不爽，捣鼓了一下预编译，试了一下大概缩短了七八分钟，目前感觉还行，现在把它记下来，给需要的童鞋当做参考，也给自己记录一下。

(转载文章)
公司的平台功能越堆越多，打包也越来越费劲，一次十几分钟，运维很不爽，so捣鼓了一下预编译，试了一下大概缩短了七八分钟，目前感觉还行，现在把它记下来，给需要的童鞋当做参考，也给自己记录一下。
项目目录

build

webpack.dll.conf.js(我们自己新建的预编译配置)

webpack.base.config.js

webpack.prod.conf.js

....

static

package.json

新建文件webpack.dll.conf.js

var webpack = require("webpack");
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var path = require("path");
var package = require("../package.json")
var outputPath = "../static/dll"

module.exports = {
  output: {
    path: path.join(__dirname, outputPath),
    filename: "dll.[name]_[hash:6].js",
    library: "[name]_[hash:6]", // 当前Dll的所有内容都会存放在这个参数指定变量名的一个全局变量下，注意与DllPlugin的name参数保持一致
  },
  entry: {
      //直接引用package里面的
    lib: Object.keys(package.dependencies),
    //也可以手动配置
    lib:[
        "jquery",
        "vue",
        "vue-router",
        "swiper"
    ]
  },
  plugins: [
    new webpack.DllPlugin({
      path: path.join(__dirname, outputPath, "[name]-manifest.json"), // 本Dll文件中各模块的索引，供DllReferencePlugin读取使用
      name: "[name]_[hash:6]",  // 当前Dll的所有内容都会存放在这个参数指定变量名的一个全局变量下，注意与参数output.library保持一致
      context: __dirname, // 指定一个路径作为上下文环境，需要与DllReferencePlugin的context参数保持一致，建议统一设置为项目根目录
    }),
    new ExtractTextPlugin("[name].css"),
    /*全局库绑定不在此处配置
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery",
      "window.jQuery": "jquery",
      "window.$": "jquery",
    }),*/
  ],
  
};

webpack.base.conf.js文件配置,在开发或打包时能引用或避开预编译下的内容

const webpack = require("webpack")
const HtmlWebpackPlugin = require("html-webpack-plugin")
const manifest = require("../static/dll/lib-manifest.json")

添加插件配置

plugins: [
   //自定义dll
    new webpack.DllReferencePlugin({
        context: __dirname+"/static/dll",
        manifest: manifest,
        dll:`${manifest.name}.js`,
    }),
    //全局库绑定
    new webpack.ProvidePlugin({
        $: "jquery",
        jQuery: "jquery",
        "window.jQuery": "jquery",
        "window.$": "jquery",
    }),
],

在webpack.prod.conf.js文件配置打包

var manifest = require("../static/dll/lib-manifest.json")

在HtmlWebpackPlugin配置里添加dll
的引用，以便在index.html里加上我们的预编译包

new HtmlWebpackPlugin({
      filename: process.env.NODE_ENV === "testing"
        ? "index.html"
        : config.build.index,
      template: "index.html",
      //在index.html里面引用这个dll
      dll:`/static/dll/dll.${manifest.name}.js`,
      inject: true,
      minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeAttributeQuotes: true
        // more options:
        // https://github.com/kangax/html-minifier#options-quick-reference
      },
      // necessary to consistently work with multiple chunks via CommonsChunkPlugin
      chunksSortMode: "dependency"
    }),

根目录下的 index.html，body的结束标签前加上

最后一步在package.json里边添加上预编译命令，srcipt里边加上一行：

//预编译命令
"dll": "webpack --progress --colors --config build/webpack.dll.conf.js",

预编译

项目根目录下运行npm run dll，就会在static目录下发现dll这个文件夹，里面就是预编译的包和预编译的引用json。

项目地址： https://github.com/JhonMr/pre...

原创文章,转载请注明出处 https://www.jianshu.com/p/156...

超融合服务器专线服务预编译阶段模板预编译 webrtc预编译预编译头文件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/95631.html

基于vue-cli的webpack配置优化

摘要：使用打包的基本上都是独立库文件，这类文件有一个特性就是变化不大。修改往添加一个配置只针对的模块化有效配置文件详情请点击基于vue-cli优化的webpack配置大概分为以下几点通过 externals 配置来提取常用库，引用外链配置CommonsChunkPlugin提取公用代码（vue-cli已做）善用alias（vue-cli配置了一部分）启用DllPlugin和D...

caohaoyu 2019-08-21 17:15 评论0 收藏0
vue-cli3 搭建的前端项目基础模板

摘要：基于搭建的前端模板，本仓库，即可搭建完成一个新项目的基础模板，源码地址，欢迎或特性预编译语言，做了一定的封装，详见雪碧图移动的适配方案引入了及，可以自由地用去开发常用的工具类引用全局注入相关的文件，如通用的及等常用的的集合支持基于 vue-cli3 搭建的前端模板，clone 本仓库，即可搭建完成一个新项目的基础模板，源码地址，欢迎 star 或 fork 特性 CSS 预编译语言...

william 2019-08-26 12:24 评论0 收藏0
vue-cli3 搭建的前端项目基础模板

摘要：基于搭建的前端模板，本仓库，即可搭建完成一个新项目的基础模板，源码地址，欢迎或特性预编译语言，做了一定的封装，详见雪碧图移动的适配方案引入了及，可以自由地用去开发常用的工具类引用全局注入相关的文件，如通用的及等常用的的集合支持基于 vue-cli3 搭建的前端模板，clone 本仓库，即可搭建完成一个新项目的基础模板，源码地址，欢迎 star 或 fork 特性 CSS 预编译语言...

mayaohua 2019-08-05 18:07 评论0 收藏0
vue-cli3.0初体验～

摘要：比如传递给时，使用。为所有的及其预处理文件开启。在生产环境下为和使用在多核机器下会默认开启。是否使用分割供应的包也可以是一个在包中引入的依赖的显性的数组。查阅配置行为。之前因为parcel的出现，webpack也跟进了零配置vue-cli自然也不能落下,cli3.0也升级到webpack4，并增加许多新特性安装并创建一个项目支持npm和yarn npm install -g @v...

AlphaWallet 2019-08-22 15:57 评论0 收藏0
（小白篇）vue-cli3.0创建项目+引入element-ui

摘要：在年月份发布了版本，经过重构之后，可以说是一个船心版本在项目都落地之后，就想升级一下版本，尝一尝带来的舒适，也是为后面项目的开展做一个准备。选了之后会询问是否开启模式，以及选择预处理器，这里根据个人情况选用。 vue-cli在2018年8月份发布了3.0版本，经过重构之后，可以说是一个船心版本！在项目都落地之后，就想升级一下cli版本，尝一尝3.0带来的舒适，也是为后面项目的开展做一个...

avwu 2019-08-23 16:43 评论0 收藏0