webpack
s清晨
这个作者很懒,什么都没留下…
展开
-
webpack如何设置html中img路径和css中背景图片路径区别开
在使用webpack过程中,打包后发现html中img路径是:<img src="img/01.jpg" alt="标题图片" /> 但是在main.css文件中的background-image.test{ width: 200px; height: 200px; background: url("img/01.jpg") center center no-rep...原创 2020-02-03 13:20:05 · 2600 阅读 · 0 评论 -
webpack插件之extract-text-webpack-plugin
此插件在webpack中文官网的地址:https://webpack.docschina.org/plugins/extract-text-webpack-plugin/说明:此插件主要是为了抽离css样式,防止将样式打包在js中引起页面样式加载错乱的现象。安装:$ npm install extract-text-webpack-plugin --save-dev如果直接安装的话...原创 2020-01-31 20:35:16 · 1619 阅读 · 0 评论 -
webpack配置文件之配置项mode
一:如果webpack的配置项mode为production。module.exports = { mode: 'production',}相当于默认设置了:module.exports = { performance: { // 性能设置,文件打包过大时,会报警告 hints: 'warning' }, output: { // 打包时,在包中不...原创 2020-01-09 10:33:11 · 1525 阅读 · 0 评论 -
已经安装了html-webpack-plugin,还是报错:Error: Cannot find module 'html-webpack-plugin'
之前项目目录是:运行起来一切成功,后来新建了build文件目录,并且将webpack.config.js移动到了build文件中,package.json中的script:"scripts": { "test": "echo \"Error: no test specified\" && exit 1", "start": "node ./src/koa....原创 2020-01-05 00:26:10 · 32558 阅读 · 1 评论 -
webpack开发模式
通过选择 development 或 production 之中的一个,来设置 mode 参数,你可以启用相应模式下的 webpack 内置的优化module.exports = { mode: 'production'};使用development时开发环境,编译出来之后的代码:/******/ (function(modules) { // webpackBootstrap/*...原创 2020-01-04 11:09:31 · 223 阅读 · 0 评论 -
webpack插件之html-webpack-plugin
webpack版本:v4.xwebpack的plugin的配置很简单,plugins配置项接收一个数组,数组里的每一项都是一个要使用的plugin的实例,plugin需要的参数通过构造函数传入。HtmlWebpackPlugin插件作用1:为html文件引入外部资源,如css,js,动态添加每次compile后的hash,防止引用缓存的外部文件问题2:可以生成创建html入口文件,比如...原创 2020-01-04 11:06:35 · 575 阅读 · 0 评论 -
运行webpack报错:Error: Cannot find module 'webpack/lib/node/NodeTemplatePlugin'
执行webpack命令:结果有报错提示:这种情况是本项目中没有安装webpack,即使全局中安装了webpack,在本项目中package.json中没有,也是无法找到。执行安装:$ npm install webpack --save-dev之后再运行webpack:...原创 2020-01-03 22:56:49 · 4472 阅读 · 0 评论 -
webpack学习之路(一):
首先将npm包管理器更新到最新版本: npm install npm@latest -gnpm 常用命令集合: https://www.cnblogs.com/blackgan/p/7828047.html原创 2019-08-24 12:43:49 · 742 阅读 · 0 评论 -
webpack学习之路(二):
首先,我有个疑问的问题,想在这记录一下,npm install moduleName --save 和 npm install moduleName --save-dev,中的–save and --save-dev有什么区别: npm install-save moduleName -save 的意思是将模块安装到项目目录下,并在package文件的dependencies节点写入依赖。...原创 2019-08-24 15:54:59 · 166 阅读 · 0 评论