webpack简介
文件配置介绍
- package.json
package.json总览全局，您可以在这里配置相当多的信息。
"name": "项目名称,不能以.(点)或者_（下划线）开头，不能包含大写字",
"version": "项目版本号如：1.0.0",
"description": "项目描述"
"author": 作者名字
"private": 是否私有
"scripts": 配置控制台命令缩写，如下配置build命令
"scripts": {
"build": "node build/build.js"// 使用node build/build.js打包与npm run build 效果一致
},
"dependencies": 项目依赖库
"devDependencies": 开发依赖库
"engines": 指定node和npm版本
"browserslist": 浏览器限制
-
build.js
8.png
当我们运行npm run build的时候，本质上执行了node build/build.js文件。
process.stdout.write作用是打印输出。
colors ： 让打包的时候有颜色。
module : 去掉内置模块信息
children ：去掉子模块
chunks : 增加包信息（设置为 false 能允许较少的冗长输出）
chunkModules : 去除包里内置模块的信息
spinner是个带图标的日志输出，我们可以在打包的过程中增加一些提示，修改如下：
const spinner = ora({
color: 'red',
text: 'spinner的颜色设置为了红色并开始打包，请稍等一会儿'
})
spinner.start()
10.png
然后在const rm = require('rimraf')的回调中，使用spinner.stop()停止。
if (stats.hasErrors()) {
console.log(chalk.red('出错啦.\n'))
process.exit(1)
}
console.log(chalk.yellow(
' Tip: built files are meant to be served over an HTTP server.\n' +
' Opening index.html over file:// won\'t work.\n'
))
console.log(chalk.blue('打包成功'))
- index.js
'use strict' 使用严格模式
assetsSubDirectory: 'static',// 静态资源目录，一般存放css,js,image等文件
assetsPublicPath: '/',// 根目录
proxyTable: {},// 解决跨域问题，后面解读
host: 'localhost', // 地址
port: 8080, // 端口号设置，端口号占用出现问题可在此处修改
autoOpenBrowser: false,//是否在编译（输入命令行npm run dev）后打开http://localhost:8080/页面，
errorOverlay: true, // 浏览器错误提示
notifyOnErrors: true,// 跨平台错误提示
poll: false, // 使用文件系统(file system)获取文件改动的通知devServer.watchOptions
cacheBusting: true, // 使缓存失效
cssSourceMap: true // 代码压缩后进行调bug定位将非常困难，于是引入sourcemap记录压缩前后的位置信息记录，当产生错误时直接定位到未压缩前的位置
},
useEslint: 是否使用Eslint Loader
devtool: 选择source-map模式 开发环境推荐：cheap-module-eval-source-map，产环境推荐：cheap-module-source-map
//unit的gzip命令用来压缩文件，gzip模式下需要压缩的文件的扩展名有js和css
productionGzip: false,
assetsRoot: path.resolve(__dirname, '../dist') 引号内设置打出来的包名和位置
productionSourceMap: 是否生成调试文件
同理的，我们可以依照上面的配置，再配置一个build(生产环境设置)。
提示：此目录下包含：dev.env.js,test.env.js,prod.env.js,index.js这四个文件,dev代表开发环境配置，test代表测试环境配置，prod代表发布环境配置，你可以根据你的项目开发环境，配置相应的信息，比如项目的域名，如果在开发/测试/发布三个环境不一样，那可以配置到对应的js文件中。在build/build.js目录下的process.env.NODE_ENV确定使用那个环境配置。
在dev.env.js中可以配置请求地址，这时我们将proxyTable中的proxyTable设为"{}"
如果展示了跨域的问题，我们可以用proxyTable解决。
修改proxyTable如下：
proxyTable: {
'/anyWord': {
target: 'your url',
changeOrigin: true,
pathRewrite: {
'^/anyWord': ''
},
cookieDomainRewrite: 'localhost',
其中changeOrigin标识是否跨域，pathRewrite表示替换关键字(这里设置的anyWord会被默认拼接到请求的最后)，target表示接口域名。
如果并不想所有的请求都使用代理，可以使用bypass。
bypass: function(req, res, proxyOptions) {
if (req.headers.accept.indexOf("otherRequest") !== -1) {
return "url + otherRequest";
}
}
代理可以设置多个。
-
check-version.js
主要功能：
1、检测node版本
2、检测npm版本 -
utils.js
主要功能：
1、css加载器的相关配置
2、对.vue文件之外的css文件或css预处理器文件进行处理 -
vue-loader
主要功能：
根据当前的开发环境对webpack中的vue-loader进行配置。 -
webpack.dev.conf.js
配置webpack编译入口。
配置webpack输出路径、名称和静态文件路径。
配置不同模块的处理规则与命名规则。
以下代码就是设置视频文件小于10kb，转换为base64文件。
{
test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('media/[name].[hash:7].[ext]')
}
},
-
webpack.dev.conf.js
主要功能
1、将hot-reload相关的代码添加到entry chunks
2、合并基础的webpack配置
3、使用styleLoaders
4、配置Source Maps
5、配置webpack插件 -
webpack.prod.conf.js.
主要功能
合并基础的webpack配置
使用styleLoaders
配置webpack的输出
配置webpack插件
gzip模式下的webpack插件配置
webpack-bundle分析
// 构建要编译输出的index.html,并在文件中嵌入资源文件
new HtmlWebpackPlugin({
// 输出的HTML文件名
filename: config.build.index,
// 模板文件路径
template: 'index.html',
// 设置为true或body可以将js代码放到<body>元素最后
// 设置为head将js代码加到<head>里面
// 设置为false所有静态资源css和JavaScript都不会注入到模板文件中
inject: true,
minify: {
// 删除注释
removeComments: true,
// 合并空白
collapseWhitespace: true,
// 删除属性的引号
removeAttributeQuotes: true
},
// 通过CommonsChunkPlugin控制chunks在html文件中添加的顺序
// 设置为dependency即按照它们之间的依赖关系添加
chunksSortMode: 'dependency'
}),
// webpack将公共模块打包的vendor.js里面使用CommonsChunkPlugin将vendor.js分离到单独的文件
new webpack.optimize.CommonsChunkPlugin({
// 公共模块名字
name: 'vendor',
minChunks: function(module, count) {
return (
module.resource &&
/\.js$/.test(module.resource) &&
module.resource.indexOf(
path.join(__dirname, '../node_modules')
) === 0
)
}
// 使用CommonsChunkPlugin可以保证如果我们的第三方插件没有变动，在打包的时候可以不被重新的打包
// 待到上线后就不会重新的加载以达到缓存的目的
// 我们会获得webpack执行时间和输出一份json文件保存chunk的id和最终引用它们的文件印射关系
new webpack.optimize.CommonsChunkPlugin({
name: 'manifest',
chunks: ['vendor']
}),
// 复制static文件夹内的静态资源到打包好的文件中
// 具体的路径是之前我们设置的"config.build.assetsSubDirectory"
new CopyWebpackPlugin([{
from: path.resolve(__dirname, '../static'),
to: config.build.assetsSubDirectory,
ignore: ['.*']
}])
// 如果开启了Gzip压缩，使用以下配置
if (config.build.productionGzip) {
var CompressionWebpackPlugin = require('compression-webpack-plugin')
webpackConfig.plugins.push(
new CompressionWebpackPlugin({
asset: '[path].gz[query]',
algorithm: 'gzip',
test: new RegExp(
'\\.(' + config.build.productionGzipExtensions.join('|') +
')$'
),
threshold: 10240,
minRatio: 0.8
})
)
}
网友评论