模块开发之webpack使用(三)
前言
由于现在前端越来越复杂,使用的js扩展语言越来越多,比如ts,jsx等,需要将这些开发的模块转换成浏览器成识别的js,webpack就是模块化打包工具.
Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源。
学习地址webpack中文文档v3.3.0版本
webpack中文文档v2.2.0版本
webpack中文文档v4.12.2版本
使用
安装
npm命令
//全局安装
npm install -g webpack
//安装到你的项目目录
npm install --save-dev webpack
webpack配置文件
一般webpack配置文件是webpack.config.js
.
简单的配置
module.exports={
entry:{
main:"./src/app.js"
},
output:{
path:path.resolve(__dirname,"app"),
publicPath:"/",
filename:"[name].js"
}
entry
:指定前端入口js文件.
path
:打包后的文件存放的地方
publicPath
:指定资源文件引用的目录
[name]
:这里app
__dirname
:是node.js中的一个全局变量,它指向当前执行脚本所在的目录。
执行命令:webpack
,这条命令会自动引用webpack.config.js文件中的配置选项
webpack命令配置
–progress –colors
当项目逐渐变大,webpack 的编译时间会变长,可以通过参数让编译的输出内容带有进度和颜色。
webpack --progress --colors
开启监听模式
开启监听模式后,没有变化的模块会在编译后缓存到内存中,而不会每次都被重新编译
webpack --progress --colors --watch
使用package.json方式打包
package.json里添加scrips:
....
"scripts": {
"dev": "webpack-dev-server --config webpack.dev.config.js"
}
....
scripts里可添加自定义的脚本,使用npm可执行该脚本 .npm可以引导任务执行.
执行命令
npm run dev
我的常用scripts
如下:
"scripts": {
"start": "webpack-dev-server --config webpack.dev.config.js --devtool eval-source-map --progress --colors",
"dev": "npm start",
"build": "webpack --config webpack.prod.config.js --progress --colors",
"test": "echo \"Error: no test specified\" && exit 1"
}
生成源码source-map
生成Source Maps.生成源码方式,在调试时使用.
devtool选项 | 说明 |
---|---|
source-map | 在一个单独的文件中产生一个完整且功能完全的文件。这个文件具有最好的source map,但是它会减慢打包速度; |
cheap-module-source-map | 在一个单独的文件中生成一个不带列映射的map,不带列映射提高了打包速度,但是也使得浏览器开发者工具只能对应到具体的行,不能对应到具体的列(符号),会对调试造成不便; |
eval-source-map | 使用eval打包源文件模块,在同一个文件中生成干净的完整的source map。这个选项可以在不影响构建速度的前提下生成完整的sourcemap,但是对打包后输出的JS文件的执行具有性能和安全的隐患。在开发阶段这是一个非常好的选项,在生产阶段则一定不要启用这个选项; |
cheap-module-eval-source-map | 这是在打包文件时最快的生成source map的方法,生成的Source Map 会和打包后的JavaScript文件同行显示,没有列映射,和eval-source-map选项具有相似的缺点; |
建议
中小型项目开发阶段使用eval-source-map
,大项目里使用cheap-module-eval-source-map
配置
module.exports = {
devtool: 'eval-source-map',
....
}
上面是ES6导出配置对象的方式,最终这个配置要应用到webpackConfig.devServer
才生效
本地服务器devServer
安装
在开发模式下,DevServer 提供虚拟服务器,让我们进行开发和调试,需要单独安装 .
安装
命令
npm install webpack-dev-server --save-dev
使用:
let webpackConfig =require('./webpack.config')
webpackConfig.devServer = {
...
}
详细介绍
Hot
热模块更新作用。即修改或模块后,保存会自动更新,页面不用刷新呈现最新的效果。
这不是和 webpack.HotModuleReplacementPlugin (HMR) 这个插件不是一样功能吗?是的,不过请注意了,HMR 这个插件是真正实现热模块更新的。而 devServer 里配置了 hot: true , webpack会自动添加 HMR 插件。所以模块热更新最终还是 HMR 这个插件起的作用。
host
写主机名的。默认 localhost
inline
设置为true,当源文件改变时会自动刷新页面
port
端口号。默认 8080
historyApiFallback
如果为 true ,页面出错不会弹出 404 页面。
compress
如果为 true ,开启虚拟服务器时,为你的代码进行压缩。加快开发流程和优化的作用。
contentBase
建议绝对路径 .你要提供哪里的内容给虚拟服务器用。
// 单目录
contentBase: path.join(__dirname, "public")
// 多目录
contentBase: [path.join(__dirname, "public"), path.join(__dirname, "assets")]
默认情况下,它将使用您当前的工作目录来提供内容。
Open
true,则自动打开浏览器。
overlay
- 如果为 true ,在浏览器上全屏显示编译的errors或warnings。默认 false (关闭)
- 如果你只想看 error ,不想看 warning。
overlay:{
errors:true,
warnings:false
}
quiet
true,则终端输出的只有初始启动信息。 webpack 的警告和错误是不输出到终端的。
publicPath
配置资源文件路径.
// devServer.publicPath
publicPath: "/assets/"
// 原本路径 --> 变换后的路径
http://localhost:8080/app.js --> http://localhost:8080/assets/app.js
proxy
当您有一个单独的API后端开发服务器,并且想要在同一个域上发送API请求时,则代理这些 url 。
proxy: {
'/proxy': {
target: 'http://your_api_server.com',
changeOrigin: true,
pathRewrite: {
'^/proxy': ''
}
}
- 假设你主机名为
localhost:8080
, 请求 API 的url
是http://your_api_server.com/user/list
'/proxy'
:如果点击某个按钮,触发请求 API 事件,这时请求 url 是http://localhost:8080/proxy/user/list
。changeOrigin
:如果 true ,那么http://localhost:8080/proxy/user/list
变为http://your_api_server.com/proxy/user/list
。但还不是我们要的 url 。pathRewrite
:重写路径。匹配/proxy
,然后变为” ,那么url
最终为http://your_api_server.com/user/list
。
完整配置如下:
webpackConfig.devServer = = {
devServer: {
contentBase: './app',
port: 8081,
inline: true,
open: true,
openPage: '',
hot: true,
proxy: {
"/api/*": {
target: ip,
secure: false,
changeOrigin: true,
pathRewrite: {
"/api": "/"
}
}
},
overlay: {
warnings: true,
errors: true
}
}
}
webpack4 Mode的默认设置生产环境与开发环境
webpack功能强大,有很多独特的功能,但其中一个难点是配置文件。为此,webpack团队改变了这一现状:webpack 4默认不需要配置文件。可以通过mode选项为webpack指定一些默认的配置。mode分为development/production,默认为production。
参考:
入门Webpack,看这篇就够了
菜鸟教程