一、相关配置
1. 调试配置:项目中调试
场景:
webpack 打包代码后,不利于代码调试;通过相关配置,
webpack
打包项目后,可以生成sourcemap
文件、或者将sourcemap
文件融入到项目代码中sourcemap
文件的作用: 独立的sourcemap
文件是以.map
为后缀的文件;便于 webpack 打包的代码,进行错误调试
devtool 选项: 在
webpack.config.js
中配置四种选项:
source-map:
优势: 生成单独文件(一个完整且功能完全的文件),包括行、列;这个文件具有最好的source map
缺点: 但是它会减慢打包速度
cheap-module-source-map:
优势: 生成单独文件(一个不带列映射的map),包括行、不包括列;提高了打包速度(因为不带列映射)
缺点: 开发者工具中 只能对应到具体的行,不能对应到具体的列;不利于调试
eval-source-map:
优势: 将
sourcemap
文件打包到项目代码中,包括行、列;(在项目代码中 生产干净的完整版的sourcema)缺点: 对打包后输出的JS文件的执行具有性能和安全的隐患;生产阶段一定不要使用(会直接将调试代码直接打包到线上)
cheap-module-eval-source-map:
优势: 将
sourcemap
文件打包到项目代码中(一个不带列映射的map),包括行、不包括列;*最快的生产source map的方法*缺点: 对打包后输出的JS文件的执行具有性能和安全的隐患
简述四种打包模式:
以上四种打包模式:由上到下 打包速度越来越快,不过同时也具有越来越多的负面作用;较快的打包速度的后果就是对执行和调试有一定的影响
建议: 大型项目中 可以使用source-map;中小型项目 使用eval-source-map;
相关代码:
// webpack.config.js 配置文件中
module.exports = {
devtool: 'eval-source-map',
}
2. 指令传参:开发环境、生产环境 打包
指令 传参:
如下:分别执行指令
npm run dev
、npm run build
;都会执行webpack
打包webpack 配置项中:会根据传入的参数
dev
、build
来做出相应判断
// window 系统下:传参
"scripts": {
"server": "webpack-dev-server --open",
"dev":"set type=dev&webapck",
"build": "set type=build&webpack"
},
// mac 系统下:传参
"scripts": {
"server": "webpack-dev-server --open",
"dev":"export type=dev&&webpack",
"build": "export type=build&&webpack"
},
- webpack 配置项中:会根据传入的参数
dev
、build
来做出相应判断
// node的语法来读取type的值,然后根据type的值用if–else判断
console.log( encodeURIComponent(process.env.type) ); // 输出传入的 type 值
if(process.env.type== "build"){
// 生产环境
var website={
publicPath:"http://192.168.0.104:1717/"
}
}else{
// 开发环境
var website={
publicPath:"http://cdn.jspang.com/"
}
}
3. webpack 配置 模块化
注意: webpack 配置文件
webpack.config.js
中,引入模块必须用require
(使用import
引入会报错)结合 指令传参: 可以将开发环境下的配置、生产环境下的配置 分别模块化;易于后期维护
4. 项目中使用 第三方类库(单独引用、全局引用)
- 方式一(模块中单独引用): 脱离 webpack,在模块中使用
import
引入,然后使用
import $ from 'jquery';
- 方式二(项目中全局引用):webpack 配置
webpack.ProvidePlugin
插件(weboack 自带的插件),模块中不需要引入,直接使用
// webapck.config.js 文件中配置如下:
const webpack = require('webpack');
plugins:[
new webpack.ProvidePlugin({
$:"jquery"
})
],
二者比较:
使用方面:
单独引用:每次使用都需要引用
全局引用:每次直接使用即可
打包优化:
单独引用:模块中引用 第三方库,但没使用;打包时 依旧会将 第三方库打包到项目代码中
全局引用:三方库没使用;打包时 不会将 第三方库打包到项目代码中
5. 修改文件 自动打包(而不是 通过启动 本地服务 自动打包) webpack --watch
场景需求: 在不启动本地服务的情况下,实现 每次修改文件后 自动完成打包
wbepack 配置文件
- 坑: 在配置
watchOptions
中的ignored
时,不需要加双引号
- 坑: 在配置
// webapck.config.js 文件中配置如下:
watchOptions: {
poll: 1000, // 检测的时间间隔(毫秒);是否修改了文件,有修改自动打包
aggregateTimeout: 500, // 防止重复保存而发生重复编译错误。这里设置的500是0.5秒内重复保存,不进行打包操作
ignored: /node_modules/, // 不监听的目录 (坑:值不需要加 双引号)
}
- package.json 配置文件
// package.json 文件中配置如下:
"scripts": {
" build": "webpack --watch"
},
- 执行命令
npm run build
,在不启动本地服务的情况下,每次修改代码 保存后webpack
自动打包
6. 打包后的 JS 代码中 首行 添加文字描述
场景需求: 有的 团队组长要求,每个提交的 打包好的 JS 代码,在第一行写上自己的名字
配置版权插件
webpack.BannerPlugin
// webapck.config.js 文件中配置如下:
const webpack = require('webpack');
plugins:[
new webpack.BannerPlugin('版权所有')
]
- 执行打包命令,到 dist 文件夹下,看 js 文件,第一行出现了 “版权所有” 的注释,如下:
7. webpack 优化打包 小细节
细节一:引入第三方模块
易忽略: 代码中 通过
import
引入了第三方模块,但没有使用;webpack
打包时,依旧会将第三方模块打包到项目中按需打包: 全局方式 引入第三方包,项目中如果没有使用,打包不会打到项目代码中
细节二:抽离第三方库(项目中很有必要)
解决方案: webpack 多入口配置 + webpack 内置的 优化插件
webpack.optimize.CommonsChunkPlugin
webpack.config.js
配置文件中
// 配置多入口
entry:{
entry:'./src/entry.js',
jquery:'jquery'
},
// 配置 webpack 优化插件
plugins: [
new webpack.optimize.CommonsChunkPlugin({
name:['jquery'], //name对应入口文件中的名字,我们起的是jQuery
filename:"assets/js/[name].js", //把文件打包到哪里,是一个路径
minChunks:2 //最小打包的文件模块数,这里直接写2就好
}),
]
8. 静态资源 集中输出
场景需求: 组长要求,项目中 引用的图片资源 或者 其他静态资源,需要保存到服务器上;这是就需要我们,进行 webpack 相关配置,将 没有使用的静态资源,直接打包到 指定文件夹
插件:
copy-webpack-plugin
安装:
npm install copy-webpack-plugin --save-dev
// webpack.config.js 中配置
const copyWebpackPlugin= require("copy-webpack-plugin");
// 相关配置
plugins: [
new copyWebpackPlugin([
{
from: __dirname + '/src/static', // 要打包的静态资源目录地址
to: './static' // 要打包到的文件夹路径
}
])
]
- __dirname 相关描述:
__dirname
是指项目目录下,是node的一种语法,可直接定位到项目的根目录
二、问题解决
1. 解决热更新不生效的问题
配置
webpack.HotModuleReplacementPlugin
插件webpack.config.js
配置中相关代码如下:
plugins: [
new webpack.HotModuleReplacementPlugin()
]