首先输入命令安装

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

webpack learn2-vue的jsx写法和postcss 1的更多相关文章

  1. 每天记录一点:NetCore获得配置文件 appsettings.json vue-router页面传值及接收值 详解webpack + vue + node 打造单页面(入门篇) 30分钟手把手教你学webpack实战 vue.js+webpack模块管理及组件开发

    每天记录一点:NetCore获得配置文件 appsettings.json   用NetCore做项目如果用EF  ORM在网上有很多的配置连接字符串,读取以及使用方法 由于很多朋友用的其他ORM如S ...

  2. webpack 配置 Vue 多页应用 —— 从入门到放弃

    webpack 配置 Vue 多页应用 -- 从入门到放弃 一直以来,前端享有无需配置,一个浏览器足矣的优势,直到一大堆构建工具的出现,其中 webpack 就是其中最复杂的一个,因此出现了一个新兴职 ...

  3. 从零开始使用 Webpack 搭建 Vue 开发环境

    创建项目 先创建一个空目录,在该目录打开命令行,执行 npm init 命令创建一个项目(无法执行 npm 命令?需要先安装 Node),这个过程会提示输入一些内容,随意输入就行,完成后会自动生成一个 ...

  4. webpack构建vue项目(配置篇)

    最近公司要求用vue重构项目,还涉及到模块化开发,于是乎,我专门花了几天的时间研究了一下webpack这个目前来看比较热门的模块加载兼打包工具,发现上手并不是很容易,现将总结的一些有关配置的心得分享出 ...

  5. webpack配合vue.js实现完整的单页面demo

    本篇文章主要是我在开发前研究了webpack+vue.js的单页面应用,因为需要用到node的npm,所以确保安装了node,建议官网安装最新的稳定版本.并且在项目中需要加载一些npm包,由于npm的 ...

  6. webpack打包vue文件报错,但是cnpm run dev正常,最后我只想说:是我太笨,还是webpack4.4版本太坑

    最近做一个项目,需要使用webpack打包 .vue 文件的单页面应用,调试都正常,使用cnpm run dev 都可以,就是webpack打包时报错.如下: ERROR in ./src/App.v ...

  7. webpack结合vue使用(五)

    webpack结合vue使用步骤如下: 安装 vue 的包 : cnpm i vue -S 由于在 webpack 中,锐减使用 .vue 这个组件模板文件定义组件,所以需要安装能解析这种文件的第三方 ...

  8. webpack打包vue单文件组件

    一.vue单文件组件 ①文件扩展名为 .vue 的 就是single-file components(单文件组件) ②参考文档:单文件组件 二.webpack加载第三方包 ①项目中,如果需要用到一些第 ...

  9. webpack 安装vue(两种代码模式compiler 和runtime)

    使用webpack安装vue,import之后,运营项目报错,如下: [Vue warn]: You are using the runtime-only build of Vue where the ...

随机推荐

  1. Python日志记录

    官方文档:https://docs.python.org/2/library/logging.html logging.basicConfig()函数中可通过具体参数来更改logging模块默认行为, ...

  2. JavaWeb学习笔记(四)

    本文内容 1. 会话技术 1. Cookie 2. Session 2. JSP:入门学习 会话技术 1. 会话:一次会话中包含多次请求和响应. * 一次会话:浏览器第一次给服务器资源发送请求,会话建 ...

  3. swiper在一个页面多个轮播图

    <script> var swiper = new Swiper('.swiper-container1', { spaceBetween: 30, centeredSlides: tru ...

  4. ingress-nginx-controller 部署以及优化

    一.说明 本文使用的ingress-nginx v1.0 最新版本,v1.0 适用于 Kubernetes 版本 >= v1.19 小于这个版本的k8s集群,请降级ingress-nginx. ...

  5. asp.net core的输入模型验证

    数据验证特性RequiredAttribute:表示数据不能为空RegularExpressionAttribute:正则校验CompareAttribute:和某个属性比较RangeAttribut ...

  6. WPF Tree多级绑定

    <Window x:Class="TreeTest.MainWindow" xmlns="http://schemas.microsoft.com/winfx/20 ...

  7. uwp 动画之圆的放大与缩小

    xml code --------------------------------------------------- <Page x:Class="MyApp.MainPage&q ...

  8. 【转载】vim 中文帮助手册的安装

    本文出处http://hi.baidu.com/bkhcvzdvmjfkpyr/item/9c238224c1a69498b6326360 vim自带的帮助手册是英文的, 对平时编程的人来说没有多大阅 ...

  9. RabbitMq四种模式介绍和授权

    rabbitmqctl change_password admin admin123 修改admin密码 界面管理和授权操作 1新增用户 rabbitmqctl add_user admin amin ...

  10. MySQL锁(表锁,行锁,共享锁,排它锁,间隙锁)使用详解

    锁,在现实生活中是为我们想要隐藏于外界所使用的一种工具.在计算机中,是协调多个进程或县城并发访问某一资源的一种机制.在数据库当中,除了传统的计算资源(CPU.RAM.I/O等等)的争用之外,数据也是一 ...