自定义vue-cli生成项目模板配置（1）
2024-10-19 11:52:44
最近在读《变量》，目前得到的认知之一：慢变量才是决定事物长期发展的因素。
打算自定义vue-cli的脚手架或者根据自己的需要设置项目模板的相关参数，很大程度与慢变量这个概念相关。
当然，我还有一个想法或者认知：我的技术方向不是成为技术大神，而是成为快速开发app的高手，准确的说是高效开发App的高手，这里的App首先是WebApp。
要想实现这个目标需要有属于自己开发习惯和开发需求的脚手架配置。那么自定义脚手架势在必行。
下面介绍一下，对vue-cli生成的项目模板做了哪些修改。
1，将项目模板自带的style样式生成函数替换，换成具体需要的，也就是webpack.dev.conf.js文件里面
module: {
rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true })
},
替换为具体项目采用的，因为经常使用scss所以换成下面配置
module: {
rules: [{
"test": /\.css$/,
"use": ["vue-style-loader", {
"loader": "css-loader",
"options": {
"sourceMap": true
}
}, {
"loader": "postcss-loader",
"options": {
"sourceMap": true
}
}]
},
{
"test": /\.scss$/,
"use": ["vue-style-loader", {
"loader": "css-loader",
"options": {
"sourceMap": true
}
}, {
"loader": "postcss-loader",
"options": {
"sourceMap": true
}
}, {
"loader": "sass-loader",
"options": {
"sourceMap": true
}
}]
}
]
}
webpack.prod.conf.js文件里面原来的配置
module: {
rules: utils.styleLoaders({
sourceMap: config.build.productionSourceMap,
extract: true,
usePostCSS: true
})
}
新配置
module: {
rules: [{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: 'vue-style-loader',
use: [{
loader: 'css-loader',
options: {
sourceMap: true
}
},
{
loader: 'postcss-loader',
options: {
sourceMap: true
}
}
]
})
}, {
test: /\.scss$/,
use: ExtractTextPlugin.extract({
fallback: 'vue-style-loader',
use: [{
loader: 'css-loader',
options: {
sourceMap: true
}
},
{
loader: 'postcss-loader',
options: {
sourceMap: true
}
},
{
loader: 'sass-loader',
options: {
sourceMap: true
}
}
]
})
}]
}
然后项目模板来面的utils.js相关的styleLoaders、exports.cssLoaders生成函数就不需要了。
2，第二步增加了webpack.dll.conf.js文件，配置如下，目的是提前打包，加快项目build速度
const path = require('path');
const webpack = require('webpack');
function resolve (dir) {
return path.join(__dirname, '..', dir)
}
module.exports = {
entry: {
vendor: [
'vue', 'vue-router'
]
},
output: {
path: path.join(__dirname, '../static/'),
filename: '[name].dll.js',
library: '[name]_library'
},
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src')
}
},
plugins: [
new webpack.DllPlugin({
path: path.join(__dirname, '../static/', '[name]-manifest.json'),
name: '[name]_library'
}),
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
},
sourceMap: true
})
]
}
使用dll插件需要在webpack.base.conf.js文件引入相关的配置
plugins: [
new webpack.DllReferencePlugin({
manifest: require('../static/vendor-manifest.json')
})
]
3，修改build中的devtool配置
// https://webpack.js.org/configuration/devtool/#development
原配置项目
devtool: '#cheap-module-eval-source-map',
修改为
devtool: '#cheap-eval-source-map',
待续……
到了cli3就不用dll了，因为性能已经很好了。
最新文章
- Android广播大全
- LeetCode Valid Number 有效数字（有限自动机）
- Notepad++中调用cl.exe编译器（Windows）
- JDK Tools - xjc: 将 XML Schema 编译成 Java 类
- linux安装java环境
- iOS 十六进制的相加取反
- Config配置文件读写
- 【HTML5】HTML5新布局元素
- javascript 基本特性
- 怎么用secureCRT连接Linux
- docker学习------docker私有仓库的搭建
- vue+uwsgi+nginx部署前后端分离项目
- C#利用SerialPort控件进行串口编程小记
- Word2010中如何在斜线表格中添加文字
- java多线程快速入门（二）
- maven 详解二
- webRTC源码下载 Windows Mac(iOS) Linux(Android)全
- java8 - 时间
- SpringSecurity之记住我功能的实现
- sharepoint rest 脚本发送邮件