vue-cli配置预编译
(转载文章)
公司的平台功能越堆越多,打包也越来越费劲,一次十几分钟,运维很不爽,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的结束标签前加上
<script src="<%= htmlWebpackPlugin.options.dll %>" ></script>
最后一步在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...
相关推荐
技术驱动人生 2020-04-24
mryangjx 2019-11-11
zmjzhangmj 2019-09-17
我是一棵树 2019-04-24
LadyZhong 2019-07-01
沉着前进 2019-06-30
晶莹的代码 2019-06-30
dangzhangjing 2019-06-30
Stephenmu 2012-05-24
gigipop 2019-06-27
yaodilu 2019-06-27
impress 2019-06-27
MarkArch 2019-06-27
huangzhe0 2011-02-11
陈浩 2019-06-21
步行者 2010-03-20
landdin0 2009-03-29