webpack初步搭建Vue项目
对文件进行打包
1. cnpm i -D webpack webpack-cli
本地热更新
1. cnpm i -D webpack-dev-server
处理图片资源
url-loader依赖file-loader
1. cnpm i -D url-loader file-loader
处理css文件
1. cnpm i -D css-loader style-loader
css预处理器
1. cnpm i -D stylus stylus-loader
2. cnpm i -D postcss-loader
预处理器工具
1. cnpm i -D autoprefixer
处理html文件
1. cnpm i -D html-webpack-plugin
处理js文件
兼容es6写法
1. cnpm i -D babel-core babel-preset-env babel-loader
处理vue文件
1. cnpm i -D vue vue-loader vue-style-loader vue-template-loader
处理vue中使用jsx文件
If using Babel 7, use 4.x
If using Babel 6, use 3.x
cnpm i -D
babel-plugin-syntax-jsx
babel-plugin-transform-vue-jsx
babel-helper-vue-jsx-merge-props
babel-preset-env
处理package.json跨平台传变量问题
cnpm i -D cross-env
webpack配置
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';
module.exports = {
target:"web",
mode:isDev ? 'development' : 'production',
devtool:"#cheap-module-eval-source-map",
devServer:isDev === 'development' ? {
port:8080,
contentBase:path.join(__dirname,'dist'),
host:'0.0.0.0',
overlay:{
errors:true
},
hot:true
} : {},
entry:path.join(__dirname,'src/index.js'),
output:{
filename:'bundle.js',
path:path.join(__dirname,'dist')
},
module:{
rules:[
{
test:/\.vue$/,
use:{
loader:'vue-loader'
}
},
{
test:/\.jsx$/,
use:{
loader:'babel-loader'
}
},
{
test:/\.css$/,
use:[
'style-loader',
'vue-style-loader',
'css-loader'
]
},
{
test:/\.styl/,
use:[
'style-loader',
'css-loader',
'postcss-loader',
'stylus-loader'
]
},
{
test:/\.(gif|jpg|jpeg|png|svg)/,
use:{
loader:'url-loader',
options:{
limit:1024,
name:'[name].[ext]'
}
}
}
]
},
plugins: [
new VueLoaderPlugin(),
new HTMLPlugin({
filename:'index.html',
template:'index.html'
}),
new webpack.NamedModulesPlugin(),
new webpack.HotModuleReplacementPlugin()
]
}
单独配置jsx,postcss
//.babelrc
{
"presets":[
"env"
],
"plugins":[
"transform-vue-jsx"
]
}
//postcss.config.js
const autoprefixer = require('autoprefixer')
module.exports = {
plugins:[
autoprefixer()
]
}
webpack初步搭建Vue项目的更多相关文章
- 使用 webpack 手动搭建 vue 项目
webpack 是一个前端工程化打包工具,对于前端工程师来说 webpack 是一项十分重要的技能.下面我们就通过搭建一个 vue 项目来学习使用 webpack 主要环境: node v14.15. ...
- element-ui和npm、webpack、vue-cli搭建Vue项目
一.element-ui的简单使用 1.安装 1. npm 安装 推荐使用 npm 的方式安装,它能更好地和 webpack 打包工具配合使用. npm i element-ui -S 2. CDN ...
- 用vue-cli来搭建vue项目和webpack
vue-cli 用vue-cli来搭建vue项目 第一步:全局安装vue-cli sudo npm install vue-cli -g 第二步:初始化一个项目 vue init webpack-si ...
- 手把手教你用vue-cli搭建vue项目
手把手教你用vue-cli搭建vue项目 本篇主要是利用vue-cli来搭建vue项目,其中前提是node和npm已经安装好,文章结尾将会简单提到一个简单的例子.使用vue-cli搭建项目最开始我也是 ...
- 搭建vue项目环境
前言 在开发本项目之前,我对vue,react,angular等框架了解,仅限于知道它们是什么框架,他们的核心是什么,但是并没有实际使用过(angular 1.0版本用过,因为太难用,所以对这类框架都 ...
- 快速搭建Vue项目
快速搭建Vue项目 第一次安装vue项目Vue推荐开发环境Node.js 6.2.0.npm 3.8.9.webpack 1.13.vue-cli 2.5.1.webstrom2016 安装环境: 安 ...
- Visual code 搭建Vue项目
使用VS Code搭建Vue项目 1.安装 VScode 2..安装最新node.JS 2.安装cnpm镜像 淘宝镜像(node自带安装了npm,故不再安装) npm install -g cnpm ...
- vue-cli搭建vue项目更新
vue-cli搭建vue项目更新 更新之前一篇博客错误的地方,在使用vue init webpack xxx 之后并不需要使用npm install 下载依赖包,而是直接根据提示 打开文件夹 再npm ...
- 教你如何搭建vue项目
笔者工作也有一些时间,需要用vue写项目时也总是项目组长已经把项目搭建好了, 偶尔心血来潮想试着自己搭建一个vue项目 我们搭建vue项目呢主要是用到了vue-cli来搭建,但是前提是必须要已经安装好 ...
随机推荐
- docker kubernetes swarm spring cloud结合学习资源
http://www.docin.com/p-2062732301.html https://blog.csdn.net/michael_hm/article/details/79213839 htt ...
- [I/O]一览图
- linux负载均衡与性能监控
平均负载是单位时间内, 系统处于可运行状态和不可中断状态的平均进程数( 平均活跃进程数 ) 可运行状体好理解, 就是进程正在运行状态Running和可运行状态Runnable... 这里需要注意的是 ...
- vector<vector<int>> 使用简单示例
#include <iostream> #include <vector> using namespace std; int main() { vector<vector ...
- DQL、DML、DDL、DCL的区别
1. 历史发展 SQL(Structure Query Language)语言是数据库的核心语言. SQL的发展是从1974年开始的,其发展过程如下:1974年-----由Boyce和Chamberl ...
- alter table添加表约束
翻阅了一下网上关于alter table添加表约束的资料,学习下,然后供自己以后使用. 仅仅供自己使用... 总结alter table ### add constraint ## 使用方法 添加表约 ...
- 基础问题:设置radio、select、checkbox 的readonly 属性
编辑记录的时候,有时候需要禁止用户修改某些项目,常用的方法有以下两种: 1>设置表单的readonly属性问题:但是readonly属性对radio.select.checkbox这三个表单不起 ...
- JavaWeb学习笔记(十一)—— JavaWeb开发模式【转】
SUN公司推出JSP技术后,同时也推荐了两种web应用程序的开发模式,一种是JSP+JavaBean模式,一种是Servlet+JSP+JavaBean模式. 一.JSP+JavaBean开发模式 1 ...
- 【转】 关于IDEA javax.servlet.http.HttpServletRequest; 不存在 解决方案
昨天从eclipse导入了一个web项目到idea,想运行一下,结果发现 servlet报红... 没有包,第一反应就是eclipse需要设置Targeted Runtimes,但是idea的设置是啥 ...
- 安装软件或运行软件时提示缺少api-ms-win-crt-runtime库解决方法
最近碰到一个问题,在我软件安装或运行时会提示缺少api-ms-win-crt-runtime-|1-1-0.dll 当然第一个想到的是运行库没有装,但是很清楚的是我的电脑是装过vc_redist_20 ...