从0开始搭建vue+webpack脚手架(二)
三、配置webpack-dev-server
1. webpack-dev-server自带一个node的服务器, 项目在服务端运行的同时可以实现热更新加载
2. 安装兼容环境变量的包 cross-env
(1)原因: 构建项目时分生产环境和开发环境,此时webpack需要配置production和development模式,需要使用一个变量来作条件判断,而不同的平台上设置环境变量方式不同,在Mac平台是 NODE_ENV=production 而windows平台上是set NODE_ENV=production,,所以需要使用cross-env
(2)安装
$ npm i -D cross-env
(3)将package.json运行脚本改为如下:
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "cross-env NODE_ENV=production webpack --progress --colors",
"dev": "cross-env NODE_ENV=development webpack-dev-server --colors --modules --progress"
},
(4)在webpack.config.js添加判断代码
const path = require('path')
const webpack = require('webpack')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const htmlWebpackPlugin = require('html-webpack-plugin')
const cleanWebpackPlugin = require('clean-webpack-plugin') // 启动脚本设置的变量都存在process.env对象中
const isDev = process.env.NODE_ENV === 'development' const config = {
target: 'web', // 设置运行环境为web浏览器端
performance: {...},
entry: path.join(__dirname, 'src/index.js'),
output: {...},
module: {...},
plugins: [
new VueLoaderPlugin(),
new cleanWebpackPlugin(['dist']),
// 根据不同环境区分打包
20 new webpack.DefinePlugin({
21 'process.env': {
22 NODE_ENV: isDev ? '"development"' : '"production"',
23 }
24 }),
new htmlWebpackPlugin({
template: path.join(__dirname, 'src/index.html')
})
]
} 31 if (isDev) {
32 config.devServer = {
33 port: 9000,
34 host: '0.0.0.0',
35 overlay: {
36 errors: true // 编译时在网页显示错误
37 }
38 }
39 } module.exports = config
将原本的配置选项使用config变量保存, 然后就可以在内部增加不同条件的配置选项。
首先定义isDev的默认值是 'development',当运行脚本 $npm run dev 时环境变量NODE_ENV的值是'development', isDev则为ture就会运行if (isDev分支)
其次在 webpack.DefinePlugin插件中定义变量NODE_ENV的值为两种情况
运行项目,警告如下
只要在脚本中分别添加 --mode='development'和--mode='production' 或在config中分别添加 mode: 'development'和mode: 'production'即可
3. 继续添加devServer的配置项
config.devServer = {
port: 9000,
host: '0.0.0.0',
overlay: {
errors: true // 编译时在网页显示错误
},
historyApiFallback: true,
hot: true,
}
10 config.plugins.push(
11 new webpack.HotModuleReplacementPlugin()
12 )
13 // config.devtool = '#cheap-module-eval-source-map'
14 }
hiistoryApiFallback: true表示任何的404页面都会跳转到入口页面index.html
hot: true开启了热更新模块 , 当未开始时,局部数据改变会导致整个页面刷新,当开启时需要配合插件HotModuleReplacementPlugin使用,否则将会显示空白页面。
此时运行项目并更改局部数据,即可看到未刷新状态下数据更新的效果
注意, 如修改.vue文件中的style样式时不能启动热更新,则需要在之前的rules中将 style-loader 改为 vue-style-loader (先安装)。
4. 配置devtool选项
(1)devtool选项生成source map代码,有助于错误定位,可配合浏览器端的Devtools插件使用
(2)在webpack4.x中可以使用webpack.SourceMapDevToolPlugin替代,其选项更多, 但切记两者不能同时使用。
(3)在配置devtool后, 可能会有如下警告, 发现之前200多kb的bundle.js文件竟然增加到1.49M,这是由于增加了source map代码的原因,将devtool: false或者不配置即可。一般情况,在开发环境可以配置devtool,但在生产环境如果配置devtool则会增大文件,极大降低加载性能。
四、支持ES6,JSX语法
(1)安装相关依赖和loader
$ npm i -D babel-core babel-loader babel-preset-env babel-plugin-transform-vue-jsx
(2)根目录下创建配置文件.babelrc
{
"presets": [
"env"
],
"plugins": [
"transform-vue-jsx"
]
}
1. babel-preset-env : 可以根据不用的环境对ES6进行转码
2. babel-core babel-loader : 配合webpack编译ES6语法
3. babel-plugin-transform-vue-jsx : 可以转换vue中的jsx代码(不是必须的,如使用JSX时再配置), 安装时提示依赖于babel-helper-vue-jsx-merge-props和babel-plugin-syntax-jsx, 将其安装即可
(3) 将babel-loader 配置添加到webpack.config.js中的rules
{
test: /\.jsx?$/,
loader: "babel-loader"
},
在src目录下创建一个测试文件 test.jsx
export default {
render() {
let styObj = {
fontSize: '22px',
border: '1px solid #333'
}
return (
<div style={[{color: '#f60'}, styObj]}>这是JSX语法的测试</div>
)
}
}
将测试组件引用到App.vue组件中 ,
<template>
<div class="app">
<div class="cover"></div>
<test></test>
</div>
</template> <script>
import Test from './components/test.jsx'
export default {
name: 'App',
data() {
return {}
},
components: {
Test
}
}
</script>
运行项目可以看到样式正常载入
五、配置autoprefixer
(1)安装相关依赖和loader
$ npm i -D postcss-loader autoprefixer
(2)根目录下创建配置文件postcss.config.js
const autoprefixer = require('autoprefixer') // 在使用postcss后处理CSS时使用autoprefixer添加浏览器内核前缀-webkit-
module.exports = {
plugins: [
autoprefixer()
]
}
(3)添加postcss-loader到webpack.config.js的stylus的rules中
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
test: /\.styl(us)?$/,
use: [
'style-loader',
'css-loader',
{
loader: "postcss-loader",
options: {
sourceMap: true
//设置为true表示使用stylus-loader中的sourceMap而不再单独生成
}
},
'stylus-loader',
]
},
至此, 项目正常运行。可以在src目录下创建不同vue组件并编辑代码
最新文章
- JS 将字符串转换成日期类型
- 100道.net面试题
- 洛谷P1508 Likecloud-吃、吃、吃
- [百科] - CreatePen()
- VirtualBox中centos网络配置
- oracle srvctl 命令
- smali 语法之if语句
- MongoDB正则表达式
- JSONPath使用
- PyChram简单使用教程
- Oracle AP Invoice APIs
- 2141:2333(zznuoj)
- CSS3_线性渐变_径向渐变----背景
- COM/DCOM简述
- 拯救安卓手机的数据(无法进入系统只能打开recovery)
- python3.6.5 路径处理与规范化
- android 线性布局
- kubernetes 网络故障遇见的坑
- 使用nginx统一代理dashboard,grafana,Prometheus二级目录访问
- C# List<;T>; 泛型