webpack - JavaScript.net.cn 「线球实验室」

前端开发

Webpack 多页面应用（多 HTML 页面 html-webpack-plugin ）

Webpack 4.0 开始，为了应对 Parcel 等的挑战，配置越来越简单，甚至可以“零配置”。一个简单的 Webpack.config.js 配置文件：const path = require('path'); module.exports = { entry: './src/index.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'bundle.js' } }; 添加上常用 loader 后的配置文件:const HtmlWebpackPlugin = r

admin  2020-05-21  webpack  1074

前端开发

Webpack 概念理解 module、chunk 和 bundle 的区别

Bundle: Produced from a number of distinct modules, bundles contain the final versions of source files that have already undergone the loading and compilation process.Bundle: bundle通常是由多个不同的模块产生，它是已经加载完毕和被编译后的源代码的最终版本。Bundle Splitting: This process offers one way of optimizing a build, allowing webp

admin  2020-05-21  webpack  1675

前端开发

Webpack file-loader 升级后 src= "[object Module]" 的解决方法

Webpack file-loader 升级后 src= "[object Module]" 的解决方法，当 file-loader 的版本是 4.3.0 及以上，则需要在 webpack.config.js 中手动配置属性 esModule 。{ test: /\.(jpg|jpeg|png|gif|svg)$/, loader: "file-loader", options: { esModule: false, // 默认值是 true，需要手动改成 false } } esModuleType: Boolean Default: trueBy de

admin  2020-03-18  webpack  1201

前端开发

Webpack使用polyfill打包兼容低版本浏览器

使用webpack项目打包以后的项目在Chrome、Safari 下运行正常，但是在IE11下运行失败！提示 vuex requires a Promise polyfill in this browser。一脸迷惑，原来是这样的。babel默认只转换语法,而不转换新的API,如需使用新的API,还需要使用对应的转换插件或者polyfill。例如，默认情况下babel可以将箭头函数，class等语法转换为ES5兼容的形式，但是却不能转换Map，Set，Promise等新的全局对象，这时候就需要使用polyfill去模拟这些新特性 babel-polyfill 原理是当运行环境中并没

admin  2018-09-10  webpack  1339

前端开发

Webpack 使用 HtmlWebpackPlugin 简化了HTML文件的创建

为什么使用 HtmlWebpackPlugin 使用webpack命令打包，默认是不能生成html文件的，我以前的解决方法，就是在webpack output的目录中，添加一个index.html文件，index.html文件的内容如下： !DOCTYPE html html lang="zh-cn" head title 首页 /title meta charset="utf-8" meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui"

admin  2018-09-08  webpack  915

前端开发

Webpack的项目中，如何import导入绝对路径

在写vue或者react中，有时候目录过深。使用相对路径引入模块，有点容易出错。比如下面这样： import {tools} from "../../../../../tools"; 在webpack.config.js 中，配置如下： resolve: { alias: { '@': require('path').resolve(__dirname, 'src') } }, 然后就可以在项目中使用绝对路径了。 import {tools} from "@/tools";

admin  2018-05-15  webpack  985

前端开发

vue+webpack 升级后在原有项目上的适配问题

本人的项目是 vue + webpack，vue单文件中使用了 Jade 模板与 less 预编译器起因是因为谈论到 Jade 模板问题，Jade 早已改名为 Pug，并且发布了2.0版本，想着不如升级了吧，顺便把 webpack 与 vue 也一并升级了，事实证明，升级需谨慎 = = 首先之前的版本如下： "vue": "2.4.2" "webpack": "2.7.0" 升级后的版本为： "vue": "2.5.7" &

admin  2017-12-20  webpack  795

前端开发

简单的webpack配置文件

package.json { "name": "test", "version": "1.0.0", "description": "no description 2017", "main": "index.js", "scripts": { "test": "run" }, "keywords": [

admin  2017-03-02  webpack  747