webpack从零开始搭建自定义vue应用

.apph1{color:red;}上一篇我们从0到1使用webpack搭建了一个基础的react应用，在团队项目中vue也用的比较多。怎么能不依赖vue-cli脚手架搭建自己的vue工程项目呢？与React相比，Vue需要的插件要少得多。我们知道在vue中，大部分都是.vue模板组件，所以关键是我们可以使用webpack的相关loader来解析.vue文件。在vue项目中解析单文件组件、热加载、cssscope等都依赖于这个插件vue-loader，所以vue-loader是vue工程中不可或缺的插件。正文开始……初始化项目新建一个webpack-03-vue目录，执行npminit-y安装相关基础配置插件npmiwebpackwebpack-clifs-loadercss-loaderstyle-loaderhtml-webpack-pluginmini-css-extract-plugin-D安装最新版本的vue，执行如下命令npmivue-s安装并解析loadernpmivue-loader-D配置loader//webpack.config.jsmodule.exports={...模块：{规则：[{测试：/\.css$/，使用：['style-loader'，'css-loader']}，{测试：/\.vue$/，加载器：'vue-loader'//与use:['vue-loader']等价}]},}除了设置loader外，我们还需要引入另一个插件VueLoaderPlugin，否则运行项目会报错加载模板。//webpack.config.jsconstHtmlWebpackPlguins=require('html-webpack-plugin');constminiCssExtractPlugin=require('mini-css-extract-plugin');//引入VueLoaderPlugin必不可少const{VueLoaderPlugin}=require('vue-loader');module.exports={...plugins:[newHtmlWebpackPlguins({template:'./public/index.html'}),newminiCssExtractPlugin({filename:'css/[name].css'}),newVueLoaderPlugin(),]}如果我们需要提取css，我们需要将style-loader替换为miniCssExtractPlugin.loader//webpack.config.jsconstminiCssExtractPlugin=require('mini-css-extract-plugin');module.exports={module:{rules:[{test:/\.css$/,use:[miniCssExtractPlugin.loader,'css-loader']},...]}所有配置完成后，见最后webpack.config.js完成配置constpath=require('path');constHtmlWebpackPlguins=require('html-webpack-plugin');constminiCssExtractPlugin=require('mini-css-extract-plugin');const{VueLoaderPlugin}=require('vue-loader');module.exports={entry:{app:'./src/index.js'},output:{filename:'[name][hash].js',path:path.resolve(__dirname,'dist')},模式:'development',module:{rules:[{test:/\.css$/,use:[miniCssExtractPlugin.loader,'css-loader']},{test:/\.vue$/,loader:'vue-loader'},{test:/\.less$/,use:[miniCssExtractPlugin.loader,'css-loader',{loader:'less-loader'},{loader:'postcss-loader'//选项：{//postcssOptions:{//插件:[['postcss-preset-env']]//}//}}]},{test:/\.(js|jsx)$/,loader:'babel-loader'}]},插件:[newHtmlWebpackPlguins({template:'./public/index.html'}),newminiCssExtractPlugin({filename:'css/[name].css'}),新VueLoaderPlugin()]};我们在src目录下新建index.js和App.vue文件.apph1{color:red;}我们在index.js中引入了App.vue文件import{createApp}from'vue';importAppfrom'./App.vue';createApp(App).mount('#app');运行npmrunserver，打开地址localhost:8080即可访问并使用less在vue中，那么我们来看一下less在vue中的应用以及在项目中配置less，我们会使用less等第三方css编译语言，scss或手写笔。在vue项目中，需要相应的loader来加载。安装npmilessless-loader-d，并设置loader//webpack.config.jsmodule。exports={模块：{规则：[...{test:/\.less$/,use:[miniCssExtractPlugin.loader,'css-loader','less-loader']},]}}在App.vue中设置less。app{h1{颜色：红色；&{字体大小：30px;}}h2{显示：弹性；}}ok页面已经支持less了，我们知道css有很多特性需要支持多种浏览器的兼容性，所以会有很多前缀，比如--webkeit--，--ms--等等，能否使用插件来支持这些前缀，所以我们需要了解一个插件postcss的配置postcsspostcss有很多可配置的参数，更多的参考，可以查看官网webpack-postcss，或者你可以查看更详细的api文档github-postcss实现更多功能npminstall--save-devpostcss-loaderpostcsspostcss-preset-env我们在loader上添加postcss-loadermodule.exports={module:{rules:[...{test:/\.less$/,use:[miniCssExtractPlugin.loader,'css-loader',{loader:'less-loader'},{loader:'postcss-loader',options:{postcssOptions:{插件：[['postcss-preset-env']]}}}]},]}}我们注意到官方提供了一个autoprefixer，但是我们在这里使用的是postcss-preset-env。其实这个插件已经具备autoprefixer的功能了。从官方网站，你可以在webpack.config中找到它。jsloader来设置postcss-preset-env，也可以在根目录下新建一个文件postcss.config.js来替换loader设置//postcss.config.jsmodule.exports={plugins:[['postcss-preset-env']]};所以你会看到样式user-select是有前缀的但是你会发现为什么display:flex没有前缀，所以就有了浏览器兼容性设置的配置，而实际上安装webpack的时候已经自动帮我们安装好了，主要依靠.browserslist来设置支持的浏览器的前缀。cssbrowserslist插件主要是让你的样式兼容多个不同版本的浏览器。如果指定的浏览器版本比较高，那么一些Supported的特性会自动支持，所以不会设置前缀。有关详细信息，请参阅浏览器列表。可以在package.json中设置，例如如下{..."dependencies":{"vue":"^3.2.36"},"browserslist":[">1%","last2versions"]}设置完成后，你会发现再次执行npmrunserver时，对应的display:flex已经有了前缀。或者可以在根目录下新建.browserslistrc文件，相当于package.json设置>1%last2versions最后用webpack搭建的vue的min项目版本已经准备好了，项目还有一些图片toload,fonticons这些都是file-loader插件的东西。后面有用的时候，安装支持配置。详情也可以参考这篇文章。Webpack从0到1构建并具有相关的文件加载器设置。这并不难。总结webpack、webpack-cli等基础插件的安装，支持vue核心插件。引入，否则直接报错。less和postcss的安装主要依赖less、less-loader、postcss、posscss-loader、postcss-preset-env插件的支持。可以在loader中配置postcss-preset-env，可以使用postcss.config.js来代替设置browserslist的配置设置，本文的代码示例主要依赖caniuse-lite和CanIUsetodobrowser兼容性查询。