使用webpackDevServer提升开发效率
/*开启一个web服务器*/
"start": "webpack-dev-server"
devServer:{
contentBase:'./dist',
open:true,//运行npm run start 自动的帮你打开一个浏览器
port:8080,
hot:true,
hotOnly:true,
proxy:{ //接口代理，为什么vue和react可以使用这个接口代理呢，因为他们
//脚手架的底层都使用了webpack-dev-server
'/api':'https://localhost:3000'
}
},
自己搭建一个服务器
1： "scripts": {
"bundle": "webpack",
"start": "webpack-dev-server",
"server":"node server.js" //在webpack.config.js的同级目录下创建一个server.js文件
},
1 cnpm install express webpack-dev-middleware -D
2 在server.js文件中
const express=require('express');
const webpack=require('webpack');//引入webpack库
const webpackDevMiddleware=require('webpack-dev-middleware');//中间件
const config=require('./webpack.config.js');//引入配置文件
const complier=webpack(config);//做编译
//在node中使用webpack
//在命令行中使用webpack
const app=express();
//在应用中使用编译器
app.use(webpackDevMiddleware(complier,{
publicPath:config.output.publicPath
}));
app.listen(3000,()=>{
console.log("server is running");
})
Hot Module Replacement热模块更新
假如我改变样式代码的时候，webpack-dev-server不要帮我刷新页面，这个时候就可以借助热模块更新帮我实现这个效果
1： devServer:{
contentBase:'./dist',
open:true,
port:8080,
hot:true, //热模块更新，设置为true
hotOnly:true,//不让浏览器自动刷新
proxy:{
'/api':'https://localhost:3000'
}
},
2：引入一个插件，这个插件是webpack自带的插件
所以先引入const webpack=require('webpack');
plugins: [new HtmlWebpackPlugin({
template: 'src/index.html'
}),
new CleanWebpackPlugin(['dist']),
new webpack.HotModuleReplacementPlugin()//引入插件
],
然后热模块功能就生效了
其次；如果我有两个js模块 A 和B
B模块的数据更新，不要影响A模块
Import a from ‘./a.js’;
If（module.hot）{//假如我开启了热模块更新
Module.hot.accept(‘./a.js’,()=>{
a();
})
}
使用babel处理es6语法
1 cnpm install --save-dev babel-loader @babel/core
2:在webpack.config.js里面添加一条规则
{
test: /.m?js$/,
exclude: /node_modules/,
use:{
loader:"babel-loader"
}
}
Babel-loader只是babel和webpack做通信的桥梁，但是babel-loader并不会把js里面的es6
的语法转变为es5的语法
3：将es6的语法转变为es5的语法
npm install @babel/preset-env --save-dev
4:添加属性
options: { presets: ['@babel/preset-env'] }
5：安装@babel/preset-env
cnpm install @babel/preset-env --save-dev
6: cnpm install --save @babel/polyfill
7:在业务代码的最顶部
引入import "@babel/polyfill";
但是这样等于对所有的业务代码进行转移，如果我们只想对需要转义的代码进行转义呢？
7：添加相应的配置
presets: [['@babel/preset-env',{
useBuiltIns:'usage'
}]],
8:需要支持什么样的浏览器，可以进行相应的配置
{
test: /.m?js$/,
exclude: /node_modules/,
use:{
loader:"babel-loader",
options:{
presets: [['@babel/preset-env',{
useBuiltIns:'usage',
targets:{
chrome:'67'
}
}]]
}
}
}
缺点是：如果你在打包一个类库的，或者ui组件库的时候，会污染全局环境，这个时候应该怎么办？
安装cnpm install --save-dev @babel/plugin-transform-runtime
安装cnpm install --save @babel/runtime
配置
options:{
// presets: [['@babel/preset-env',{
// useBuiltIns:'usage',
// targets:{
// chrome:'67'
// }
// }]]
"plugins": [["@babel/plugin-transform-runtime",{
"corejs": 2,
"helpers": true,
"regenerator": true,
"useESModules": false
}]]
}
安装cnpm install --save @babel/runtime-corejs2