最全的webpack.base.config.js文件中文注释

更新日期: 2020-02-28阅读: 1.8k标签: webpack

代码

'use strict'
const path = require('path') // 引入Node.js的Path模块
const utils = require('./utils') // 引入utils文件,此处主要用到了assetsPath()方法,用来根据开发模式或生产模式来使用config文件下的相应配置
const config = require('../config') // 引入config文件夹下index.js,使用打包或开发配置
const vueLoaderConfig = require('./vue-loader.conf') // 引入vue文件加载规则

function resolve (dir) { // 用于生成dir变量的绝对路径
return path.join(__dirname, '..', dir) // Path模块join方法,用于连接路径,正确使用当前系统路径分隔符,Unix系统是"/",Window系统是"\"
}

module.exports = {
context: path.resolve(__dirname, '../'), // 返回到项目为止的基础目录,绝对路径
entry: { // 入口文件,可以为多个,单页面应用(SPA):一个入口起点,多页面应用(MPA):多个入口起点
app: './src/main.js'// 可以全局引入样式框架iview或elementUI,工具库,插件等
},
// 配置打包输出路径和命名规则
output: {
// 此处最终指向了path.resolve(__dirname, '../dist'),
// 也就是打包之后,会生成一个dist夹,所有的资源文件都在dist里面
path: config.build.assetsRoot,
// 打包后出的文件名,name就是入口文件前面的key值,
// 此处是index和admin.为什么用name,因为会打包出来三个文件,
// 第一个是源代码文件,第二个是runtime文件,第三个是ventor文件,
// 所以每个文件打包出来的名字就跟定义的chunkname一致。
filename: '[name].js',
//上线地址,也就是真正的文件引用路径
publicPath: process.env.NODE_ENV === 'production'
? config.build.assetsPublicPath
: config.dev.assetsPublicPath
},
resolve: {
//省略的文件后缀名,require模块可以省略不写后缀名
extensions: ['.js', '.vue', '.json'],
alias: { //模块别名配置,用符号或变量名,替换较长的路径
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'), // @符号代表src开始的绝对路径
'static': resolve('static') // static代表static开始的绝对路径
}
},
// 关于模块配置
module: {
// 模块规则(配置 loader、解析器等选项)
rules: [
{ // 对vue文件使用vue-loader解析器
test: /\.vue$/,
loader: 'vue-loader',
options: vueLoaderConfig // 配置选项在同级目录vue-loader.conf.js文件里
},
{ // 对js文件使用babel-loader编译转码,解析es6代码
test: /\.js$/,
loader: 'babel-loader',
include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]// 限定解析范围
},
{ // 对图片文件使用url-loader,10000字节之内的图片,会进行base64转换
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]') //资源发布路径
}
},
{ // 对多媒体文件使用url-loader,10000字节之内时,进行base64转换
test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('media/[name].[hash:7].[ext]') //资源发布路径
}
},
{ // 对字体图标文件使用url-loader,小于10000字节时,进行base64转换
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('fonts/[name].[hash:7].[ext]') //资源发布路径
}
}
]
},
node: {
// prevent webpack from injecting useless setImmediate polyfill because Vue
// source contains it (although only uses it if it's native).
setImmediate: false,
// prevent webpack from injecting mocks to Node native modules
// that does not make sense for the client
dgram: 'empty',
fs: 'empty',
net: 'empty',
tls: 'empty',
child_process: 'empty'
}
}


链接: https://www.fly63.com/article/detial/8771

浅谈Webpack打包工具的应用

webpack 在前端工程中随处可见,当前流行的 vue, react, weex 等解决方案都推崇 webpack 作为打包工具。前端工具云集的时代,这是你值得选择的之一。

一步一步webpack,webpack的学习入门

webpack是前端工程构建的一套工具,为什么一个程序称之为一套呢,是因为webpack其实是npm的一个模块,使用起来的话,这期间还需要很多其它模块来进行支持,所以我称之为一套工具。

如何写 Webpack 配置文件

本文从一个小Demo开始,通过不断增加功能来说明webpack的基本配置,只针对新手。webpack基本的配置就可以熟悉了,会引入loader,配置loader选项,会设置alias,会用plugins差不多。

WebPack中Plugins的使用和整理,以及常用的Plugins插件

Plugins是webpack的基础,我们都知道webpage的plugin是基于事件机制工作的,这样最大的好处是易于扩展。讲解如果扩展内置插件和其他插件,以及我们常用的Plugins插件

大多数项目中会用到的webpack小技巧

webpack技巧的总结:进度汇报、压缩、复数文件打包、分离app文件与第三方库文件、资源映射、输出css文件、开发模式、分析包的大小、更小的react项目、更小的Lodash、引入文件夹中所有文件、清除extract-text-webpack-plugin日志。

优化Webpack构建性能的几点建议

Webpack 作为目前最流行的前端构建工具之一,在 vue/react 等 Framework 的生态圈中都占据重要地位。在开发现代 Web 应用的过程中,Webpack 和我们的开发过程和发布过程都息息相关,如何改善 Webpack 构建打包的性能也关系到我们开发和发布部署的效率。

Webpack 4正式发布了!

新版 Webpack 中我们所做的每一个更新目的都在于此,为了当大家在使用 Webpack 的时候敏捷连续毫无顿挫感。 webpack 4 进行构建性能测试,得出的结果非常有趣。结果很惊人,构建时间降低了 60%-98%!

Webpack 4.0.0不再支持 Node.js 4

Webpack 是一个现代 JavaScript 应用程序的模块打包器 (module bundler) 。当 Webpack 处理应用程序时,它会递归地构建一个依赖关系图,其中包含应用程序需要的每个模块

我当初为什么写webpack_Tobias Koppers

Tobias Koppers是一位自由软件开发者,家住德国纽伦堡。他因写出webpack这个已有数百万开发者使用的开源软件而名噪一时。他目前专注于JavaScript和开源项目。以下是我对他个人的专访,希望对大家有所启发。

webpack项目轻松混用css module

本文讲述css-loader开启css模块功能之后,如何与引用的npm包中样式文件不产生冲突。比如antd-mobilenpm包的引入。在不做特殊处理的前提下,样式文件将会被转译成css module。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!