一,webpack
1,打包输出管理
index.html根据项目的推进可能需要引入多个功能模块,那么在这主程序要引入多个bundle包,所以我们需要对每个功能模块打包,并引入
2,多个功能模块打包
创建功能模块
print.js, alert.js
在webpack.config.js中修改代码:
entry: {
index:'./src/index.js',
print:'./src/print.js',
alert:'./src/alert.js'
},
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
}
npm run build
3,自动修改index.html 文件引入的bundle包
安装插件:
npm install --save-dev html-webpack-plugin
在webpack.config.js中修改代码:
const path = require('path');
+ const HtmlWebpackPlygin = require('html-webpack-plugin');
+ plugins:[
new HtmlWebpackPlygin({
title:'输出管理'
})
],
npm run build
4,自动清理dist文件夹
将无用的bundle包删除,
下载插件
npm install clean-webpack-plugin --save-dev
在webpack.config.js中修改代码:
const path = require('path');
+ const CleanWebpackPlugin = require('clean-webpack-plugin');
+ plugins:[
new CleanWebpackPlugin(['dist'])
],
npm run build
5,source map
错误定位
bundle包会将主文件以及依赖文件打包在一起,并且对代码进行了压缩与混淆,一旦代码出现错误,很难定位到
js自带功能
inline-source-map(仅用于解释说明,不要用于生产环境)
写在这里:
entry: {
app:'./src/index.js',
print:'./src/print.js',
alert:'./src/alert.js'
},
+ devtool:'inline-source-map',
npm run build
6,观察者模式自动构建
每次修改代码都需要进行npm run build 重新构建,使用 watch 可以自动构建
"watch":"webpack --watch"
每次都需要刷新浏览器才能出现更新
能不能自动刷新浏览器呢?
7,简单的本地服务器
实现实时重载,实时打包,浏览器实时更新
下载插件:
npm install --save-dev webpack-dev-server
在webpack.config.js中修改代码:
devtool:'inline-source-map',
+ devServer:{
contentBase:'./dist'
},
在package.json中加入:
"start":"webpack-dev-server --open"
npm run start
修改端口:
devServer:{
contentBase:'./dist',
port:8888
},