之前有用 webpack4与babel7改造基于vue-cli2生成的工程模板,介绍文章在此。之后通过一些实践,除去了cli工具相对复杂的配置结构,提供轻量化版本的配置方案。之所以说是轻量化,是相对于Vue、react等框架提供的官方cli工具而言的。并不是说这些cli工具不好,它们本身提供了开箱即用的良好特性,又集成了很多提升开发体验的插件,确实能降低框架使用的门槛。但也正是因为工具高度集成,配置高度抽象,导致生成的webpack配置文件结构略显复杂。对于一个技术选型已趋稳定的前端团队来说,比如一般只会使用一种css预处理方案,以及相对固定的插件集成,所以完全可以固定某些配置选项,从而输出一个轻量的工程配置方案。这也有利于灵活更改或升级某些依赖,从而进一步提升开发体验及输出性能。
在开始配置之前,还是要明确自身的需求。对于前端应用来说,使用webpack作为工程化工具,我们希望除了静态文件server,babel编译等基本需求外,还能满足以下这些体验及要求:
本文是以Vue框架应用为例,应用示例用的就是vue-cli生成的工程模板,可以clone 代码仓库 到本地运行。React技术栈的同学也请留步,webpack的配置方案基本是一致的,无非就是babel配置有差异。简化后的方案只在build目录下有3个配置文件:webpack.base.js, webpack.dev.js, webpack.prod.js。其中 dev与prod 分别是开发和生产构建的webpack config文件,在package.json中可以配置如下npm scripts用于开发和生产构建:
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.js",
"build": "cross-env NODE_ENV=production webpack --config build/webpack.prod.js"
}
两个文件都继承了webpack.base.js,此文件包含了主要配置项,下面就方案的关键配置做下注解。
const devMode = process.env.NODE_ENV !== 'production';
function resolve (dir) {
return path.join(__dirname, '..', dir)
}
context: resolve(''),
entry: {
app: './src/main.js'
}
output: {
path: resolve('dist'),
filename: devMode ? 'js/[name].js' : 'js/[name].[chunkhash].js',
chunkFilename: devMode ? 'js/[name].js' : 'js/[name].[chunkhash].js',
publicPath: '/',
}
主要设置模块如何被解析,包括别名配置,可以提升一定的构建效率,具体看配置,不做展开。
根据项目规模和资源加载性能要求进行合理的分包配置,其中涉及到的参数与原理都会相对复杂,本文也不做展开。本方案里给到的是可以满足中小型应用的通用策略:分出 common包与vendor包。
optimization: {
splitChunks: {
chunks: 'async',
name: true,
cacheGroups: {
common: {
name: 'common',
chunks: 'initial',
minChunks: 2
},
vendor: {
name: 'vendor',
test: /[\\/]node_modules[\\/]/,
chunks: 'all'
}
}
}
}
模块处理规则配置,使用恰当的loader处理各种模块。
"presets": [
[
"@babel/preset-env",
{
"modules": false,
"targets": {
"browsers": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
},
"useBuiltIns": "usage",
"corejs": 3
}
]
],
{
test: /\.(sa|sc|c)ss$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
hmr: devMode,
},
},
'css-loader',
// 'postcss-loader',
// 'sass-loader',
],
},
MiniCssExtractPlugin({
filename: devMode ? 'css/[name].css' : 'css/[name].[contenthash].css',
chunkFilename: devMode ? 'css/[id].css' : 'css/[id].[contenthash].css',
}),
webpack.dev.js 是开发环境的webpack config 文件,使用webpack-merge继承 webpack.base.js ,内容主要是开发阶段所需的一些特定配置。
devServer: {
stats: {
colors: true,
builtAt: true,
cached: true,
cachedAssets: true,
modules: false,
children: false
}
}
webpack.prodjs 是生产环境的webpack config 文件,也使用webpack-merge继承了 webpack.base.js 的主要配置。在这里设置mode值为 production,同样使用DefinePlugin设置process.env.NODE_ENV值为production,使用TerserPlugin等插件对生产构建输出包进行压缩优化。另外引入optimize-css-assets-webpack-plugin插件,对输出的css bundle也做优化处理。
也可以使用 babel-minify-webpack-plugin插件进一步压缩经babel编译的代码,但从实际使用来看,此插件带来的压缩效果并不明显,编译耗时倒是增加不少,可以看具体情况来决定是否使用。
至此,轻量版本的webpack工程配置已经完成。可以拉取仓库代码在本地运行体验,工程效果基本是与 vue-cli 生成版本一致的,不过对比vue-cli 的整个应用工程配置, 去除了单测、e2e测试,以及编译错误桌面提醒等插件的集成,可以根据实际需求再行配置。
对于需要维护多个项目的团队,为了能让webpack工程配置能尽可能通用,可以考虑将配置方案封装成一个npm包,抽象部分配置项作为可变参数,比如publicPath,一般是不同应用不同值。在应用里可以使用webpack-merge,对一些配置进行覆盖或增加,会有更好的灵活性。就如文章开头所提,一个团队内的模块处理方案基本是统一的,所以无需抽象过多配置项,否则又走回 cli 工具的老路了。
本文从实战出发,提供了一个相对普适的轻量化webpack工程配置方案。受篇幅所限,没有对一些配置项做过多解释,如果需要了解某个配置细节,可以查询相关文档或文章。有兴趣的同学也可以阅读webpack源码作深入了解。
原文:https://segmentfault.com/a/1190000021047381
Vue很优雅,没太多废话和周折,代码漂亮,思路清晰,大赞!上手比较快。Vue.js 因其性能、通用、易用、体积、学习成本低等特点已经成为了广大前端们的新宠。
编写自己的cli工具,一行命令,3秒钟进入coding状态!看完本文,你将学会如何从零开发一个cli项目,如何上传到github库,以及如何使用npm发布自己的包。
vue init webpack 项目名字创建项目时,就可以选择单元测试,运行npm run e2e进行e2e单元测试了,结果发现出现很多错误,下面就总结下如何解决这些问题?
vue-cli致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接,这样你可以专注在撰写应用上,而不必花好几天去纠结配置的问题。与此同时,它也为每个工具提供了调整配置的灵活性,无需 eject
vue-cli 3.0版本,配置代理Proxy,在项目根目录下新建vue.config.js,它是一个可选的配置文件,新建该文件,存放在项目根目录(将自动加载)中。配置代理如下:
最近准备开发一款web应用,考虑到可能会有前后端并行开发的场景,所以决定使用mockjs做mock server。浏览官网文档时发现没有跑在webpack上的例子,索性自己找方法解决。当前端工程师需要独立于后端并行开发时,后端接口还没有完成,那么前端怎么获取数据?
在项目开发前期,前端开发中,页面布局基本开发完毕,但是后台还接口还没有开发完,等待后台开发完接口,在进行接口联调,浪费了等待时间,也压缩的测试的时间
vue 开发过程中,保存一次就会编译一次,如果能够减少编译的时间,哪怕是一丁点,也能节省不少时间。开发过程中个人编写的源文件才会频繁变动,而一些库文件我们一般是不会去改动的。如果能把这些库文件提取出来,就能减少打包体积,加快编译速度。本文主要讲述在 vue-cli3 中利用 DllPlugin 来进行预编译。
要安装Angular CLI你需要先安装node和npm,然后运行以下命令来安装最新的Angular CLI:注意:Angular CLI 需要Node 4.X 和 NPM 3.X 以上的版本支持。
在webpack.base.conf.js里加入(新版的可能找不到这个文件,你可以npm install webpack --save-dev进行手动安装),在module.exports的最后加入,在main.js 引入,新版直接在main.js 引入
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!