4
10天从入门到精通Vue(五)Webpack打包自动打开浏览器、热更新和配置浏览器的默认端口号...
source link: https://blog.51cto.com/zhanjq/5606883
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
10天从入门到精通Vue(五)Webpack打包自动打开浏览器、热更新和配置浏览器的默认端口号、打包css、less等
精选 原创Table of Contents
实现自动打开浏览器、热更新和配置浏览器的默认端口号
⚠️注意：热更新在JS中表现的不明显，可以从一会儿要讲到的CSS身上进行介绍说明！
- 修改
package.json的script节点如下，其中--open表示自动打开浏览器，--port 4321表示打开的端口号为4321，--hot表示启用浏览器热更新：
"dev": "webpack-dev-server --hot --port 4321 --open"
- 修改
webpack.config.js文件，新增devServer节点如下：
devServer:{
hot:true,
open:true,
port:4321
}
- 在头部引入
webpack模块：
var webpack = require('webpack');
- 在
plugins节点下新增：
new webpack.HotModuleReplacementPlugin()
使用webpack打包css文件
- 运行
cnpm i style-loader css-loader --save-dev - 修改
webpack.config.js这个配置文件：
module: { // 用来配置第三方loader模块的
rules: [ // 文件的匹配规则
{ test: /\.css$/, use: ['style-loader', 'css-loader'] }//处理css文件的规则
]
}
- 注意：
use表示使用哪些模块来处理test所匹配到的文件；use中相关loader模块的调用顺序是从后向前调用的；
使用webpack打包less文件
- 运行
cnpm i less-loader less -D - 修改
webpack.config.js这个配置文件：
{ test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
使用webpack打包sass文件
- 运行
cnpm i sass-loader node-sass --save-dev - 在
webpack.config.js中添加处理sass文件的loader模块：
{ test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] }
使用webpack处理css中的路径
- 运行
cnpm i url-loader file-loader --save-dev - 在
webpack.config.js中添加处理url路径的loader模块：
{ test: /\.(png|jpg|gif)$/, use: 'url-loader' }
- 可以通过
limit指定进行base64编码的图片大小；只有小于指定字节（byte）的图片才会进行base64编码：
{ test: /\.(png|jpg|gif)$/, use: 'url-loader?limit=43960' },
使用babel处理高级JS语法
- 运行
cnpm i babel-core babel-loader babel-plugin-transform-runtime --save-dev安装babel的相关loader包 - 运行
cnpm i babel-preset-es2015 babel-preset-stage-0 --save-dev安装babel转换的语法。 - 在
webpack.config.js中添加相关loader模块，其中需要注意的是，一定要把node_modules文件夹添加到排除项：
{ test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }
- 在项目根目录中添加
.babelrc文件，并修改这个配置文件如下：
{
"presets":["es2015", "stage-0"],
"plugins":["transform-runtime"]
}
- 注意：语法插件
**babel-preset-es2015**可以更新为**babel-preset-env**，它包含了所有的ES相关的语法；
babel-preset-env：你需要的唯一Babel插件
Runtime transform 运行时编译es6
本文内容到此结束了，
如有收获欢迎点赞👍收藏💖关注✔️，您的鼓励是我最大的动力。
如有错误❌疑问💬欢迎各位大佬指出。
主页： 共饮一杯无的博客汇总👨💻保持热爱，奔赴下一场山海。🏃🏃🏃
- 1赞
- 1收藏
- 评论
- 分享
- 举报
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK