网站质量度,濮阳网警,正能量网站入口不用下载,akm建站系统当前前端开发#xff0c;90%的项目都是Vue和React#xff0c;然而70%的同学都基于脚手架创建项目#xff0c;因为脚手架会包含项目基本框架、webpack配置、scss/sass/less解析、babel配置、DevServer、JSX/Vue文件解析、CSS前缀等#xff0c;我们要做的就是开发功能模块90%的项目都是Vue和React然而70%的同学都基于脚手架创建项目因为脚手架会包含项目基本框架、webpack配置、scss/sass/less解析、babel配置、DevServer、JSX/Vue文件解析、CSS前缀等我们要做的就是开发功能模块也就是开箱即用。 如果不用脚手架我们怎么编写配置此文章要求对Vue/React有一点基础.技术文档Webpack: https://www.webpackjs.com/Vue: https://cn.vuejs.org/React: https://react.docschina.org/开发环境IDE推荐VSCode、浏览器推荐Chrome/Edge、Node版本v12.13.0创建项目# 进入工作空间cd workspace# 创建项目mkdir webpack-demo (window用户直接右键创建)# 进入到项目中cd webpack-demo# 初始化配置(默认一路回车)npm init打开项目创建目录node_modules项目依赖目录提前创建是为了添加gitignorepublicVue项目静态目录仿Vue4.0脚手架src项目源码.gitignore忽略Git提交文件初始化为Git项目(方便管理)# 终端下执行git init编写代码(基础部分直接上代码)index.html# public下index.html Vue main.js# main.js入口import Vue from vueimport App from ./app.vuenew Vue({ el:#app, render:(h)h(App)})app.vue 欢迎学习webpack4.42知识 {{title}} export default { name:app, data(){ return { title:Hello Vue } } } .app{ text-align: center; }创建Webpack配置webpack默认配置webpack.config.js不建议修改名字前端常用规范AMD、CMD、CommonJS、ESwebpack遵循的是CommonJS规范需要使用module.export导出。打包基本配置# webpack4.42版本内容讲解module.exports { mode:development,//指定环境生成production entry:./src/main.js,//项目入口 //项目输出 output:{ // [name]指原名字 // [hash]会生成hash串添加在name后面 filename:[name].[hash].js, // 打包输出目录 //__dirname是node语法指当前目录意思 path:__dirname/dist, // 根路径默认/用在打包后的js/css上面 publicPath:/, // 打包模块名称 library:webpack-demo, // 打包模块方式umd实际上是AMDCMD混合 libraryTarget:umd }}通过library设置后如下注以上代码只是打包的基础配置只能打包原生JS还不能编译Vue项目。安装依赖 分析Vue文件我们会发现包含ES6、.vue、scss语法所以我们需要安装对应插件。开发Vue项目必然需要安装Vuecnpm i vue -S# OR cnpm install vue --save--save 和 --save-dev区别save会保存在dependencies里面save-dev会保存在devDependencies里面项目生产依赖用save项目开发依赖用dev.安装loader# vue-loader 解析.vue文件vue-loader vue-template-compiler# 解析scss/sass语法node-sass sass-loader# 添加样式前缀 postcss-loader autoprefixer# 把scss/less转换为csscss-loader# 把css转化为style样式style-loader# 解析ES6语法(必须安装三个)babel/core babel/preset-env babel-loader# 解析图片(file-loader增强版)url-loader file-loader# 安装到dev依赖中cnpm i vue-loader vue-template-compiler node-sass sass-loader postcss-loader autoprefixer css-loader style-loader babel/core babel/preset-env babel-loader url-loader file-loader -D以上是针对本次Vue项目所需要安装的插件和loader/** * webpack4.42版本内容讲解 * module可以设置模块解析规则和loader * test 校验规则 * use 加载loader从右往左 * exclude 排除目录 * include 包含目录 */module.exports { // mode、entry、output参考上面 module:{ rules:[ { test:/\.css$/, use:[style-loader,css-loader,postcss-loader], exclude:/node_modules/, include:/src/ },{ test:/\.vue$/, loader:vue-loader, exclude:/node_modules/, include:/src/ },{ test:/\.(js|.jsx)$/, loader:babel-loader, exclude:/node_modules/, include:/src/ },{ test:/\.(png|jpg|gif|svg)$/, use:{ loader:url-loader, options:{ // 10k以下用base64 limit:10 } }, exclude:/node_modules/ },{ test:/\.(scss|sass)$/, use:[style-loader,css-loader,postcss-loader,sass-loader], exclude:/node_modules/, include:/src/ } ] }}安装webpack# 打包必须webpack webpack-cli # 启动本地服务器webpack-dev-server# 安装到开发依赖中cnpm i webpack webpack-cli webpack-dev-server -D安装webpack-plugin# 清空文件夹clean-webpack-plugin# html抽取打包html-webpack-plugin# 复制插件copy-webpack-plugin# 安装到开发依赖中cnpm i clean-webpack-plugin html-webpack-plugin copy-webpack-plugin -Dwebpack-plugin配置const { CleanWebpackPlugin } require(clean-webpack-plugin);const HtmlWebpackPlugin require(html-webpack-plugin);const VueLoaderPlugin require(vue-loader/lib/plugin);const CopyWebpackPlugin require(copy-webpack-plugin);module.exports { // mode/entry/output/module参考上面 plugins:[ // 打包前清空目录 new CleanWebpackPlugin(), // 解析Vue需要配合插件使用 new VueLoaderPlugin(), // 复制public内容到dist里面去 // vuecli4.0会生成public文件夹里面包含index.html和静态资源 // 此处通过复制插件在打包时将public全部拷贝过去 new CopyWebpackPlugin([ { from : __dirname /public, to : __dirname /dist, ignore: [.*] } ]), // html打包插件会自动把js插入进去 new HtmlWebpackPlugin({ template:public/index.html }), ]}DevServer配置// 通过本地服务器访问Vue项目module.exports { devServer:{ // 服务根目录 contentBase:__dirname/dist, // 服务主机 host:localhost, // 服务端口 port:8080, // 代码热更新 hot:true, // 默认打开浏览器 open:true, // 默认打开的页面 openPage:index.html, // 接口代理作用相当大 proxy:{ /api:{ target:http://lemall.futurefe.com } } }}到此我们完成了大部分代码规则的配置接下来我们需要再添加两个小配置.babelrc和postcss创建.babelrc文件{ presets:[ babel/preset-env, babel/preset-react ]}注Vue项目使用第一个React项目使用第二个babel/preset-env 是 Vue babel插件babel/preset-react 是 React babel插件添加postcss配置通常有些项目会使用postcss.config.js我们这儿推荐修改package.json添加对应配置。打开package.json添加如下代码postcss: { plugins: { autoprefixer: {} }},browserslist: [ 1%, last 2 versions]到此我们的项目全部配置完成接下来就添加运行脚本在scripts里面增加build和servescripts: { // 生产打包 build: webpack, // 本地启动服务 serve: webpack-dev-server },OK接下来运行cnpm run build即可打包代码开启本地服务最后我们尝试添加图片代码看看是否能解析拷贝图片到public下面在app.vue中添加img标签div classapp h1欢迎学习webpack4.42知识h1 p{{title}}p p欢迎关注前端未来关乎你的未来p img src/imgs/qrcode.jpg altdiv项目会自动热更新截图如下代码已上传Github有需要的同学可自行下载https://github.com/JackySoft/webpack-demo同样大家可以模仿此文章打包React项目React项目本身是jsx语法通过babel-loader解析即可代码基本不动大家只需要添加React代码即可编译运行。关注前端关注未来关乎你的未来
