webpack learn2-vue的jsx写法和postcss 1
2023-09-27 14:21:28 时间
首先输入命令安装
npm i postcss-loader autoprefixer babel-loader babel-core
在根目录创建文件 .babelrc和postcss.config.js
其中postcss.config.js内容:
const autoprefixer = require('autoprefixer') module.exports = { plugins: [ autoprefixer() ] }
.babelrc内容:
{ "presets": [ "env" ], "plugins": [ "transform-vue-jsx" ] }
再次配置webpack.config.js文件,内容:
const path = require('path') const VueLoaderPlugin = require('vue-loader/lib/plugin') const HTMLPlugin = require('html-webpack-plugin') const webpack = require('webpack') const isDev = process.env.NODE_ENV === 'development' const config = { target: 'web', entry: path.join(__dirname,'src/index.js'), output: { filename: 'bundle.js', path: path.join(__dirname,'dist') }, module: { rules: [ { test: /\.vue$/, loader: 'vue-loader' },{ test: /\.jsx$/, loader: 'babel-loader' },{ test:/\.css$/, use: [ 'style-loader', 'css-loader' ] },{ test: /\.styl/, use: [ 'style-loader', 'css-loader', { loader: 'postcss-loader', options: { sourceMap: true } }, 'stylus-loader' ] },{ test:/\.(jpg|svg|jpeg|png|gif)$/, use: [ { loader: 'url-loader', options: { limit: 1024, name: '[name]-aa.[ext]' } } ] } ] }, plugins:[ new VueLoaderPlugin(), new webpack.DefinePlugin({ 'process.env': { NODE_ENV: isDev ? '"development"' : '"production"' } }), new HTMLPlugin() ] } if(isDev) { // 帮助调试代码 config.devtool = '#cheap-module-eval-source-map' config.devServer = { port: 8000, host: '0.0.0.0', overlay: { errors: true }, // 热加载功能:只渲染修改的组件,不会刷新页面 hot: true //open: true 改配置后就自动打开浏览器 } config.plugins.push( new webpack.HotModuleReplacementPlugin(), new webpack.NoEmitOnErrorsPlugin() ) } module.exports = config
最后npm run dev
相关文章
- Vue项目碰到"‘webpack-dev-server’不是内部或外部命令,也不是可运行的程序或批处理文件"报错
- windows obs直播RTMP协议推流到Nginx流媒体服务器到VUE使用HLS直播
- vue之tab切换
- 微信小程序药店管理系统+后台管理系统|前后分离VUE
- vue-route+webpack部署单页路由项目,访问刷新出现404问题
- 基于 vue-element 组件实现音乐播放器功能
- Vue 计算属性 computed
- vue+vux+es6+webpack移动端常用配置步骤
- Vue知识(二)组件化开发
- 一字一句的搞懂vue-cli之vue webpack template配置
- Vue和vue-template-compiler版本之间的问题
- vue 上传图片到阿里云(前端直传:不推荐)
- webpack 配置 Vue 多页应用 —— 从入门到放弃
- 【Vue全家桶】邂逅Vue、Vue的多种引入方式
- 助你提高效率的几个Vue指令
- vue.js与其他前端框架的对比
- 【Vue 开发实战】实战篇 # 28:如何自定义Webpack和Babel配置
- vue常见面试问题收藏
- Vue防止多次点击
- 让在Vue中使用的EventBus也有生命周期
- Vue.js项目模板搭建
- webpack入坑之旅(六)配合vue-router实现SPA
- webpack入坑之旅(五)加载vue单文件组件
- Vue-Router + Webpack 路由懒加载实现
- Vue.js学习系列四——Webpack打包工具的使用(装修中……)
- vue——代码相同,但启动后样式错乱页面不同