精华内容
下载资源
问答
  • 不过如果你需要手写webpack配置, 或者对webpack感兴趣, 也许你会疑惑: 添加了hash后的文件名每次打包都会变动, 如何将最新文件名写入到页面上?答案是通过html-webpack-plugin插件将打包之后的文件名Inject到index....

    需求

    如果你使用 Vue/React脚手架搭建的项目, 你可能永远不需要这个步骤.

    不过如果你需要手写webpack配置, 或者对webpack感兴趣, 也许你会疑惑: 添加了hash后的文件名每次打包都会变动, 如何将最新文件名写入到页面上?

    答案是通过html-webpack-plugin插件将打包之后的文件名Inject到index.html中.

    此逻辑仅仅需要配置几行代码

    new HtmlWebpackPlugin({

    filename: 'index.html',

    template: 'index.html',

    inject: true,

    })

    很简单, 所以我们一般不用花时间研究它.

    不过我在一个项目中, index.html不再由前端定义, 而是由服务端渲染输出, 所以HtmlWebpackPlugin这套逻辑不再走得通.

    现在 后端就需要知晓打包后的文件名, 才能正确输出文件名到index.html中.

    方案

    读取output文件夹中的文件名

    这个方案最显而易见与简单, 不过它却有一些缺点:

    output中文件有很多, 包括Entry和异步Chunk, 由于我们无法区分Entry和其他文件, 只能手动指定要引入的Entry文件, 代码会像这样:

    并不优雅, 我想要一个循环搞定

    编写Webpack插件导出文件名

    如果我们要区分Entry和其他文件, 那么就只能从Webpack入手, 由于Webpack太强大(复杂), 我们需要在网上找找资料, 搜索关键字: get webpack hash.

    他们提到一个方案: 在插件中获取需要的文件名, 输入为一个清单文件.

    有了这个清单文件, 后端就能读取它并注入到index.html中了.

    不过它们提供的代码太简陋, 不能用于生产, 故继续查找资料来编写我所需要的插件:

    同时在html-webpack-plugin插件有相同功能: 将打包好的文件inject到index.html中. 所以也去翻了翻它的源码.

    最后搬运过来的代码就是这样:

    class DumpAssetsPlugin {

    /*

    options: {

    filename: 'dist/access.json', // default: outputPath + "/assets.json"

    }

    */

    constructor(options) {

    options = options || {}

    this.options = {

    filename: options.filename || null,

    };

    }

    apply(compiler) {

    compiler.hooks.afterEmit.tap("ExportAssets", (compilation) => {

    // see https://webpack.js.org/api/stats/

    let stats = compilation.getStats().toJson();

    let entrypoints = compilation.entrypoints;

    let entryNames = Array.from(entrypoints.keys());

    let files = []

    for (let i = 0; i < entryNames.length; i++) {

    const entryName = entryNames[i];

    const entryFiles = entrypoints.get(entryName).getFiles();

    files.push(...entryFiles)

    }

    function unique(arr) {

    return arr.filter(function (item, index, arr) {

    return arr.indexOf(item, 0) === index;

    });

    }

    files = unique(files)

    let assets = {

    js: [],

    css: [],

    uncase: [] // 意料之外的文件

    }

    files.forEach(f => {

    const sp = f.split('.')

    const ext = sp[sp.length - 1]

    if (assets[ext]) {

    assets[ext].push(f)

    } else {

    console.warn('uncased file ext:', f)

    assets.uncase.push(f)

    }

    })

    let filename = this.options.filename

    if (!filename) {

    filename = stats.outputPath + "/assets.json"

    }

    require("fs").writeFileSync(

    filename,

    JSON.stringify(assets)

    );

    });

    }

    }

    使用方法如下:

    module.exports = {

    entry: {

    index: ['./src/index.js'],

    },

    output: {

    path: __dirname + '/dist',

    filename: 'js/[name].[chunkHash:8].js'

    }

    ...

    plugins: [

    ...

    new DumpAssetsPlugin()

    ]

    }

    展开全文
  • webpack获取npm命令行参数

    千次阅读 2020-11-06 14:54:01
    需求:通过npm命令,添加不同的参数,来执行不同的打包内容。 就这么一个小功能,我查了小半一天的资料,说的天花乱坠怎么干的都有。 其实没那么复杂,我这里说两种最简单的方法,不需要引入任何的第三方模块。 方法...

    需求:通过npm命令,添加不同的参数,来执行不同的打包内容。

    就这么一个小功能,我查了小半一天的资料,说的天花乱坠怎么干的都有。

    其实没那么复杂,我这里说两种最简单的方法,不需要引入任何的第三方模块。

    方法一:
    命令行直接输入,不需要在package.json里配置:

    npm run dev --aaa=/webpack/src
    

    aaa参数名可以随便改。我们最终目的是要要拿到 /webpack/src 这个值,
    然后我们在webpack的打包配置文件里,直接用下边两行代码就可以了。

    const serverPath = process.env.npm_config_aaa;
    console.log(serverPath);  // 输出结果:/webpack/src
    

    方法二:
    参数需要添加到package.json的script里

     "scripts": {
         "dev": "webpack-dev-server --config build/webpack.local --这里是自定义参数随便写"
     }
    

    命令行输入:

    npm run dev
    

    然后我们在webpack的打包配置文件里,写上下边两行代码:

    const arg = process.argv;
    console.log(process.argv);
    /**
    输出结果是个数组(需要什么):
    [
      '--config',
      'build/webpack.local',
      '--这里是自定义参数随便写'
    ]
    **/
    

    可以看到,中文参数也支持,但这里只是给大家做个师范,方便理解,正式开发的时候中文的话小心被打死。

    展开全文
  • webpack获取图片的真实路径

    千次阅读 2017-10-17 20:38:06
    我们经常遇见的一种情况是: ...动态添加一个DOM,这个DOM里含有一个有图片路径的东西(比如...另外,因此是从我已有项目中摘抄出来,因此可能有一些遗漏的,我未删除的内容,如果在使用中发现了,请自行删除。

    HTML标签里的图片url

    我们经常遇见的一种情况是:

    1. 需要通过foo.js动态添加一个DOM,这个DOM里含有一个有图片路径的东西(比如是img标签);
    2. 假如foo.jsabc文件夹下,图片bar.png也在abc文件夹下;
    3. 那么我们想当然的在img的src属性里,写了<img src="./bar.png"/>
    4. 然后报错说:http://xx.xx.xx.xx/bar.png not fount
    5. 解决办法是,参照以下示例:
    // foo.js
    let imgURL = require('./bar.png')
    let imgDOM = `<img src="${imgURL}"/>`

    此时正常

    css里的图片url

    如果是例如在background-image:url()里写url,需要注意一点,图片的url是相对于css文件,准确的说,是有这个属性的文件的相对路径,而不是组件(即DOM所在文件)的相对路径。

    static文件解决办法

    一般来说,我们配置的脚手架可能有static文件夹。

    效果是用作静态文件夹,注意,要脚手架或者是webpack配置才可以喔。

    当把文件放在这个里面的时候,我们就可以通过/static/文件名来正确的获取到该文件了,可以无视相对路径。

    给一个vue的webpack脚手架,可以直接使用。

    vue-scaffold

    说明:

    vue的脚手架

    安装

    npm install
    自带axios、less、vue、vue-router、vuex。

    以及例如babel、eslint、webpack、热加载等,足以满足一般开发需要。

    详细请阅读package.json

    另外,因此是从我已有项目中摘抄出来,因此可能有一些遗漏的,我未删除的内容,如果在使用中发现了,请自行删除。

    展开全文
  • Webpack

    2020-12-24 13:43:15
    Webpack一、什么是WebpackWebpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源。从图中我们可以看出,Webpack 可以将多种静态资源 js、css...

    Webpack

    一、什么是Webpack

    Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源。

    从图中我们可以看出,Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件,减少了页面的请求。

    二、Webpack安装

    1、全局安装

    npm install -g webpack webpack-cli

    2、安装后查看版本号

    webpack -v

    三、初始化项目

    1、创建webpack文件夹

    进入webpack目录,执行命令

    npm init -y

    2、创建src文件夹

    3、src下创建01.js

    exports.info = function (str) {

    document.write(str);

    }

    4、src下创建02.js

    exports.add = function (a, b) {

    return a + b;

    }

    5、src下创建03.js

    const part01 = require('./01.js')

    const part02 = require('./02.js')

    part01.info('hello'+part02.add(1,2))

    四、JS打包

    1、webpack目录下创建配置文件webpack.config.js

    以下配置的意思是:读取当前项目目录下src文件夹中的03.js(入口文件)内容,分析资源依赖,把相关的js文件打包,打包后的文件放入当前目录的dist文件夹下,打包后的js文件名为merge.js

    const path = require("path"); //Node.js内置模块

    module.exports = {

    entry: './src/03.js', //配置入口文件

    output: {

    //输出路径,__dirname:当前文件所在路径

    path: path.resolve(__dirname, './dest'),

    filename: 'merge.js' //输出文件

    },

    }

    2、命令行执行编译命令

    webpack #有黄色警告

    webpack --mode=development #没有警告

    #执行后查看bundle.js 里面包含了上面两个js文件的内容并惊醒了代码压缩

    也可以配置项目的npm运行命令,修改package.json文件

    "scripts": {

    //...,

    "dev": "webpack --mode=development"

    }

    运行npm命令执行打包

    npm run dev

    3、webpack目录下创建01.html

    引用merge.js

    4、浏览器中查看01.html

    五、CSS打包

    1、安装style-loader和 css-loader

    Webpack 本身只能处理 JavaScript 模块,如果要处理其他类型的文件,就需要使用 loader 进行转换。

    Loader 可以理解为是模块和资源的转换器。

    首先我们需要安装相关Loader插件,css-loader 是将 css 装载到 javascript;style-loader 是让 javascript 认识css

    npm install --save-dev style-loader css-loader

    2、修改webpack.config.js

    const path = require("path"); //Node.js内置模块

    module.exports = {

    //...,

    output:{},

    module: {

    rules: [

    {

    test: /\.css$/, //打包规则应用到以css结尾的文件上

    use: ['style-loader', 'css-loader']

    }

    ]

    }

    }

    3、在source文件夹创建style.css

    body{

    background:pink;

    }

    4、修改03.js

    在第一行引入style.css

    require('./style.css');

    执行:

    webpack --mode=development

    5、浏览器中查看01.html

    展开全文
  • 初识webpack

    2020-12-24 13:43:43
    webpack是基于模块化的打包(构建)工具,通过一个入口文件递归出所有模块的依赖关系,经过一系列的过程(压缩,合并),最终生成运行的代码。webpack的特点解决工程化问题(只关注开发时的代码,把工程化过程中的问题...
  • 以上这篇解决webpack无法通过IP地址访问localhost的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持软件开发网。 参考地址:...
  • loader承担的是翻译官的职责,利用其弥补了让webpack只能理解JavaScript和JSON文件的问题,从而可以处理其它类型的文件,所以loader对webpack的重要性不言而喻,所以学习构建一个loader是学习webpack的必经之路。...
  • 1、什么是webpack(必会) webpack是一个javascript的静态模块打包工具 webpack里一切文件皆模块,通过loader转换文件,通过plugin注入钩子 最后输出由多个模块组合成的文件,webpack专注构建模块化...
  • 因为我们是基于webpack的git版本获取,而webpack是基于node的,因为是基于vue的前端,我们没有办法在src底下的前端项目中获取src文件之外的东西(如果你这样做了,不过不是static,那是不对的),所以我们只能在src...
  • Webpack 5升级内容(一)

    千次阅读 2020-11-16 00:16:04
    Webpack 5升级内容 版本发布时间 webpack 4于2018年2月发布 Webpack 5.0.0于2020年10月10日发布 此版本关注 此版本重点关注以下内容: 通过持久化缓存提高构建性能。 使用更好的算法和默认值来改善长期缓存。 ...
  • webpack

    2021-01-12 17:20:33
    一、安装1.查看版本情况npm info webpack2....本地安装 详见webpackmkdir webpack-democd webpack-demonpm init -ynpm install webpack webpack-cli --save-dev4.本地安装查看版本号./node_modu...
  • webpack基本介绍及使用

    2020-12-24 13:43:43
    1.什么是webpackwebpack是一个前端资源加载/打包工具。它根据模块的依赖关系进行静态分析,然后将这些模块按照指定的...2.webpack安装全局安装:npm install webpack -gnpm install webpack-cli -g查看版本号:webp...
  • webpack通过url-loader获取资源文件路径

    千次阅读 2018-03-10 20:28:21
    webpack的项目需要引入一个资源文件时,比如一个swf文件,可以通过url-loader获取打包后资源的路径
  • Webpack的使用

    2020-12-22 04:30:28
    webpack的使用在项目中安装和配置webpack1、运行npm install webpack webpack-cli -D命令 安装webpack相关的包2、在项目的根目录中,创建webpack.config.js的webpack 配置文件3、在webpack 的配置文件中初始化如下...
  • 打开浏览器 ... 在这里,可以省去这些步骤,在启动服务后,直接自动在默认浏览器打开项目预览 安装相关插件 npm install opn chalk -D ...更新 webpack.dev.conf.js 文件,文件顶部先引入插件 ...
  • react配置webpack4.0

    2018-06-12 13:15:58
    我在实际工作中用百度 fis3 搭建 React 开发环境,但是放在整个前端社区中,webpack 肯定更适合大家,这里就用 webpack。如果之前未听说或者未用过 webpack 的同学,一定此机会恶补一下,也可以查阅官网 开始之前 ...
  • 使用 webpack 插件自动生成 Vue.js 路由文件的方法发布于 2020-4-29|复制链接摘记: 一款自动生成 vue 路由文件的 webpack 插件vue-route-webpack-plugin 在项目中试点成功了,现在在项目中已 ..一款自动生成 vue ...
  • webpack 配置 插件(plugin) 添加版权的 plugin 打包 html 的 plugin js 压缩的 plugin 模式(mode) webpack 配置 插件(plugin) loader 用于转换某些类型的模块,而插件则可以用于执行范围更广的任务。包括:...
  • Webpack 缓存

    2019-09-03 22:18:17
    使用 webpack 来打包我们的模块化后的应用程序,webpack 会生成一个可部署的 /dist 目录,然后把打包后的内容放置在此目录中。只要把 /dist 目录中的内容部署到服务器上,客户端(通常是浏览器)就能够访问此服务器...
  • 另请查看官方Webpack 4文档以获取正确的TypeScript设置: ://webpack.js.org/guides/typescript/ 注意,这仍然是一个在制品。 欢迎贡献/建议 :grinning_face_with_big_eyes: 产品特点 Webpack 4 TypeScript 2...
  • webpack.DefinePlugin使用介绍 webpack.DefinePlugin
  • } compilation.chunks.forEach(function (chunk) { chunk.files.forEach(function (filename) { // compilation.assets 存放当前所有即将输出的资源 // 调用一个输出资源的 source() 方法能获取到输出资源的内容 let...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 27,027
精华内容 10,810
关键字:

如何获取webpack内容