牛商网营销型网站建设,商标设计网免费,做汽车精品的网站,山东济南seo整站优化目录 1_开启本地服务器1.1_开启本地服务器原因1.2_webpack-dev-server 2_HMR热模块替换2.1_认识2.2_开启HMR2.3_框架的HMR 3_devServer配置3.1_host配置3.2_port、open、compress 4_开发与生成环境4.1_如何区分开发环境4.2_入口文件解析4.3_区分开发和生成环境配置 1_开启本地服… 目录 1_开启本地服务器1.1_开启本地服务器原因1.2_webpack-dev-server 2_HMR热模块替换2.1_认识2.2_开启HMR2.3_框架的HMR 3_devServer配置3.1_host配置3.2_port、open、compress 4_开发与生成环境4.1_如何区分开发环境4.2_入口文件解析4.3_区分开发和生成环境配置 1_开启本地服务器
1.1_开启本地服务器原因
目前开发的代码为了运行需要有两个操作
操作一npm run build编译相关的代码操作二通过live server或者直接通过浏览器打开index.html代码查看效果
这个过程经常操作会影响的开发效率希望可以做到当文件发生变化时可以自动的完成 编译 和 展示 为了完成自动编译webpack提供了几种可选的方式
webpack watch modewebpack-dev-server常用webpack-dev-middleware 1.2_webpack-dev-server
上面的方式可以监听到文件的变化但是事实上它本身是没有自动刷新浏览器的功能的
当然目前可以在VSCode中使用live-server来完成这样的功能但是希望在不适用live-server的情况下可以具备live reloading实时重新加载的功能
安装webpack-dev-server npm install webpack-dev-server -D 修改配置文件启动时加上serve参数 packjson.js文件中 scripts: {build: webpack --config webpack.config.js,serve: webpack serve --config webpack.config.js},webpack.config.js文件中
module.exports {devServer: {}
}webpack-dev-server 在编译之后不会写入到任何输出文件而是将 bundle 文件保留在内存中。 事实上webpack-dev-server使用了一个库叫memfsmemory-fs webpack自己写的 2_HMR热模块替换
2.1_认识
什么是HMR
HMR的全称是Hot Module Replacement翻译为模块热替换模块热替换是指在 应用程序运行过程中替换、添加、删除模块而无需重新刷新整个页面
HMR通过如下几种方式来提高开发的速度
不重新加载整个页面这样可以保留某些应用程序的状态不丢失只更新需要变化的内容节省开发的时间修改了css、js源代码会立即在浏览器更新相当于直接在浏览器的devtools中直接修改样式
如何使用HMR呢
默认情况下webpack-dev-server已经支持HMR只需要开启即可默认已经开启在不开启HMR的情况下当修改了源代码之后整个页面会自动刷新使用的是live reloading 2.2_开启HMR
修改webpack.config.js配置
module.exports {devServer: {hot: true,}
} 浏览器的控制台会出现下面的提示
[HMR] waiting for update signal from wDs.. .
[WDS] Hot Module Replacement enabled.但是当修改了某一个模块的代码时依然是刷新的整个页面 这是因为需要去指定哪些模块发生更新时进行HMR
// 指定哪一个模块需要HMR
if (module.hot) {module.hot.accept(./utils/demo.js, () {console.log(demo模块发生了更新)})
}2.3_框架的HMR
有一个问题在开发其他项目时是否需要经常手动去写入 module.hot.accpet相关的API呢比如开发Vue、React项目修改了组件希望进行热更新这个时候应该如何去操作呢
事实上社区已经针对这些有很成熟的解决方案了
比如vue开发中使用vue-loader此loader支持vue组件的HMR提供开箱即用的体验比如react开发中有React Hot Loader实时调整react组件目前React官方已经弃用了改成使用react-refresh 3_devServer配置
3.1_host配置
host设置主机地址
默认值是localhost如果希望其他地方也可以访问可以设置为 0.0.0.0
localhost 和 0.0.0.0 的区别
localhost本质上是一个域名通常情况下会被解析成127.0.0.1;127.0.0.1回环地址(Loop Back Address)表达的意思其实是主机自己发出去的包直接被自己接收; 正常的数据库包经常 应用层 - 传输层 - 网络层 - 数据链路层 - 物理层 ;而回环地址是在网络层直接就被获取到了是不会经常数据链路层和物理层的;比如监听 127.0.0.1时在同一个网段下的主机中通过ip地址是不能访问的; 0.0.0.0监听IPV4上所有的地址再根据端口找到不同的应用程序。比如监听 0.0.0.0时在同一个网段下的主机中通过ip地址是可以访问的 3.2_port、open、compress
port设置监听的端口默认情况下是8080
open是否打开浏览器
默认值是false设置为true会打开浏览器也可以设置为类似于 Google Chrome等值
compress是否为静态文件开启gzip compression。 默认值是false可以设置为true 4_开发与生成环境
4.1_如何区分开发环境
目前所有的webpack配置信息都是放到一个配置文件中的webpack.config.js
当配置越来越多时这个文件会变得越来越不容易维护并且某些配置是在开发环境需要使用的某些配置是在生成环境需要使用的当然某些配置是在开发和生成环境都会使用的所以最好对配置进行划分方便维护和管理
那么在启动时如何可以区分不同的配置呢
方案一编写两个不同的配置文件开发和生成时分别加载不同的配置文件即可方式二使用相同的一个入口配置文件通过设置参数来区分它们
packjson.js的关键代码如下 scripts: {build: webpack --config ./config/webpack.prod.config.js,serve: webpack serve --config ./config/webpack.dev.config.js}4.2_入口文件解析
之前编写入口文件的规则是这样的 ./src/index.js但是如果的配置文件所在的位置变成了 config 目录是否应该变成 …/src/index.js呢
如果这样编写会发现是报错的依然要写成 ./src/index.js这是因为入口文件其实是和另一个属性时有关的 context
context的作用是用于解析入口entry point和加载器loader
官方说法默认是当前路径但是经过测试默认应该是webpack的启动目录另外推荐在配置中传入一个值
const path require(path)
module.exports {context: path.resolve(__dirname,./) //context是配置文件所在目录entry: ../src/index.js, //或者main./src/main.js
}const path require(path)
module.exports {context: path.resolve(__dirname,../) //context是上一个目录entry: ./src/index.js, //或者main./src/main.js
}4.3_区分开发和生成环境配置
创建三个文件
webpack.comm.conf.jswebpack.dev.conf.jswebpack.prod.conf.js 在终端输入命令 npm install webpack-merge -D webpack.dev.config.js
const { merge } require(webpack-merge)
const commonConfig require(./webpack.comm.config)module.exports merge(commonConfig, {mode: development,devServer: {hot: true,// host: 0.0.0.0,// port: 8888,// open: true// compress: true}
})webpack.prod.config.js
const { CleanWebpackPlugin } require(clean-webpack-plugin)
const { merge } require(webpack-merge)
const commonConfig require(./webpack.comm.config)module.exports merge(commonConfig, {mode: production,output: {clean: true},plugins: [new CleanWebpackPlugin()]
})webpack.comm.config.js
const path require(path)
const { VueLoaderPlugin } require(vue-loader/dist/index)
const HtmlWebpackPlugin require(html-webpack-plugin)
const { DefinePlugin } require(webpack)module.exports {entry: ./src/main.js,output: {filename: bundle.js,path: path.resolve(__dirname, ../build)},resolve: {extensions: [.js, .json, .vue, .jsx, .ts, .tsx],alias: {utils: path.resolve(__dirname, ../src/utils)}},module: {rules: [{test: /\.css$/,use: [ style-loader, css-loader, postcss-loader ]},{test: /\.less$/,use: [ style-loader, css-loader, less-loader, postcss-loader ]},{test: /\.(png|jpe?g|svg|gif)$/,type: asset,parser: {dataUrlCondition: {maxSize: 60 * 1024}},generator: {filename: img/[name]_[hash:8][ext]}},{test: /\.js$/,use: [{ loader: babel-loader}]},{test: /\.vue$/,loader: vue-loader}]},plugins: [new VueLoaderPlugin(),new HtmlWebpackPlugin({title: 测试项目,template: ./index.html}),new DefinePlugin({BASE_URL: ./,coderwhy: why,counter: 123})]
}
