在使用webpack进行项目打包的时候,我们可通过以下方式对不同类型的资源,进行文件名或文件路径的修改
new CopyPlugin({
patterns: [
{
from: "**/**.txt",
to: "xx/xx.ext"
},
],
})
修改入口文件的文件名
通过配置output的filename属性,可以动态的改变入口文件的文件路径和文件名,通常的我们会这样设置filename: "[name].[chunkhash].js",而其中的name就是文件名修改的关键,这个name我们可以在entry入口中进行定义
entry:{
index: path.resolve(__dirname, './src/index.js'),
youindex: path.resolve(__dirname, './src/index.js')
}
在entry中也可以配置某一个库/组件的文件进行打包
entry:{
ol: path.resolve(__dirname, './static/ol/ol_me.js'),
}
filename除了可以设置类似占位符格式的字符串,还可以是一个函数,函数第一个参数中包含了打包文件的一系列信息,根据这些信息,可以去自定义打包文件的输出名称
output:{
filename: (pathData) => {
return pathData.chunk.name === 'main' ? utils.assetsPath('js/youfilename.js') : utils.assetsPath('js/[name].[chunkhash].js');
}
}
filename占位符字符串对应的结果可以由以下参数拼接或者返回:
修改非入口(按需引入)文件的文件名
通过配置output的chunkFilename 属性,可以动态的改变非入口文件的文件路径和文件名,通常的我们会这样设置chunkFilename: "[name].[chunkhash].js",而其中的name就是文件名修改的关键。
chunkFilename 指未被列在 entry 中,却又需要被打包出来的 chunk 文件的名称,output.chunkFilename 默认使用[id].js或从 output.filename 中推断出的值,id是输出文件的块id,一般是从1开始叠加的数字,除了[id]还可以配置占位符[name],[name]是文件按需引入时配置的chunkName值,如果没有配置chunkName,[name] 会被预先替换为 [id]。
配置好chunkFilename后,还需要在文件按需引入时配置chunkName值,早期的按需引入使用require.ensure(),这就不说了,现在按需引入基本都是使用import(),在import()中我们加入chunkFilename 的配置,就可以修改打包后的文件路径和文件名,配置以/* webpackChunkName: “xxx” */的形式存在
const Login = () => import(/* webpackChunkName: "myLogin" */ '../components/login.vue')
在webpack 4的版本中chunkFilename必须是一个字符串,但是在webpack 5中,他也可以像filename一样设置一个函数,去自定义文件路径和文件名。
chunkFilename字符串占位符对应的结果和filename一样,可以由以下参数拼接或者返回:
在mini-css-extract-plugin的配置中,同样有关于filename和chunkFilename的配置,具体用法和修改js文件名的配置一样。
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
new MiniCssExtractPlugin({
// Options similar to the same options in webpackOptions.output
// both options are optional
// filename: utils.assetsPath('css/[name].[contenthash].css'),
filename: (pathData) => {
return pathData.chunk.name == 'main' ? utils.assetsPath('css/youfilename.[hash].css') : utils.assetsPath('css/[name].[hash].css')
},
chunkFilename: (pathData) => {
return utils.assetsPath('css/[id].[hash].css')
},
})
webpack中对图片等资源的打包配置在module.rules中,rules中可以通过options属性值,把配置传递给url-loader或者file-loader。file-loader的配置项中有一个属性name,我们可以通过配置这个name属性来修改打包文件的文件路径和文件名,name的配置同样支持字符串占位符和函数两种形式,通常我们像下面一样配置字符串的形式
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
// 10000字节以下的图片会被转换为base64编码
limit: 10000,
// 生成 name+7位hash+ext格式的文件名
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
}
其中[name]、[hash]等占位符都和filename的占位符一样
除了字符串形式,还可以像下面一样配置更灵活的函数形式
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
// 10000字节以下的图片会被转换为base64编码
limit: 10000,
// 生成 name+7位hash+ext格式的文件名
name: function(filepath){
let filename = filepath.split('\\').pop()
return process.env.NODE_ENV !== 'development' && filename == 'xxx.png' ? utils.assetsPath('img/youfilename.[ext]') : utils.assetsPath('img/[name].[hash:7].[ext]')
}
}
},
webpack 在前端工程中随处可见,当前流行的 vue, react, weex 等解决方案都推崇 webpack 作为打包工具。前端工具云集的时代,这是你值得选择的之一。
webpack是前端工程构建的一套工具,为什么一个程序称之为一套呢,是因为webpack其实是npm的一个模块,使用起来的话,这期间还需要很多其它模块来进行支持,所以我称之为一套工具。
本文从一个小Demo开始,通过不断增加功能来说明webpack的基本配置,只针对新手。webpack基本的配置就可以熟悉了,会引入loader,配置loader选项,会设置alias,会用plugins差不多。
Plugins是webpack的基础,我们都知道webpage的plugin是基于事件机制工作的,这样最大的好处是易于扩展。讲解如果扩展内置插件和其他插件,以及我们常用的Plugins插件
webpack技巧的总结:进度汇报、压缩、复数文件打包、分离app文件与第三方库文件、资源映射、输出css文件、开发模式、分析包的大小、更小的react项目、更小的Lodash、引入文件夹中所有文件、清除extract-text-webpack-plugin日志。
Webpack 作为目前最流行的前端构建工具之一,在 vue/react 等 Framework 的生态圈中都占据重要地位。在开发现代 Web 应用的过程中,Webpack 和我们的开发过程和发布过程都息息相关,如何改善 Webpack 构建打包的性能也关系到我们开发和发布部署的效率。
新版 Webpack 中我们所做的每一个更新目的都在于此,为了当大家在使用 Webpack 的时候敏捷连续毫无顿挫感。 webpack 4 进行构建性能测试,得出的结果非常有趣。结果很惊人,构建时间降低了 60%-98%!
Webpack 是一个现代 JavaScript 应用程序的模块打包器 (module bundler) 。当 Webpack 处理应用程序时,它会递归地构建一个依赖关系图,其中包含应用程序需要的每个模块
Tobias Koppers是一位自由软件开发者,家住德国纽伦堡。他因写出webpack这个已有数百万开发者使用的开源软件而名噪一时。他目前专注于JavaScript和开源项目。以下是我对他个人的专访,希望对大家有所启发。
本文讲述css-loader开启css模块功能之后,如何与引用的npm包中样式文件不产生冲突。比如antd-mobilenpm包的引入。在不做特殊处理的前提下,样式文件将会被转译成css module。
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!