-
2021-05-01 16:47:45
一、什么是loader？
- 从webpack本身来说，主要是用作处理我们写的js代码，并且webpack会处理js之间的依赖。
- 但是，在开发中我们不仅仅有基本的js代码处理，我们也需要加载css,图片，也包括一些高级的ES6转成ES5代码，将TypesScript代码庄臣ES5代码，将scss,less，转成css，将.jsx,.vue文件转成js文件等等。
- 对于 webpack本身的能力来说，对于这些转化是不支持的。这时候我们就可以给webpack扩展对应的loader就可以了。loader让webpack能够去处理其他类型的文件，并将他们装换为有效模块，以供应用程序使用。以及添加到依赖图中。
-loader使用
步骤一：通过npm安装需要使用的loader
步骤二：在webpack.config.js中的modules关键字进行配置
1.loader处理样式资源
1.1 依赖less文件
在入口文件中引入一个less文件
import './css/index.less'1.2 安装对应的loder
less-loader则对less文件进行加载，less是将less语法转译为css语法。
npm install less less-loader -D转译为css，还要使用import加载，这时候我们需要使用css-loader来加载css文件
npm install css-loader -D此时css的模块加载完成，最后还需要将导出的模块作为样式添加到DOM中，这时候我们就用到了style-loader
npm install style-loader -D//loader的配置 module:{ rules:[ //详细的loader配置 { //表示.css结尾的文件 test:/\.css$/, //使用那些loader进行处理 use:[ //user中的loader执行顺序，从右到左 //创建style标签，将js中的样式资源插入进行，添加到head中生效 'style-loader', //将css文件变成commonjs模块加载到js中，里面内容是样式字符串 'css-loader', ] }, { test:/\.less$/, user:[ 'style-loader', 'css-loader', //将less文件编译成css文件 'less-loader' ] } ] },1.3将css导出为一个单独文件
将css文件打包成一个单独文件，这里我们需要使用一个插件来实现：
1.安装插件：
npm install MiniCssExtractPlugin -D2.文件配置
module:{ rules:[ { test:/\.css$/, use:[ //这个loader取代style-loader,作用：提取js中的css成单独文件 { loader:MiniCssExtractPlugin.loader, options: { esModule: false, //表示输出的路径 publicPath: "../", } }, 'css-loader' ] } ] }, //插件使用 plugins:[ new MiniCssExtractPlugin({ //输出的文件名 filename:'css/built.css' }) ],2.loader处理图片资源
当我们在项目中导入图片资源的时候，也需要将它进行打包为模块，这里也需要使用loader来处理图片
2.1 引入依赖
import img from './image.png' //或者是在css文件中引入 background:ulr('./image.png')2.2 安装相应的loader
url-loader功能类似于file-loader，用于将文件转换为base64URL格式。
npm install url-loader -D2.3文件配置
//处理图片资源 { test:/\.(png/jpg/gif)$/, user:[ //使用对象 {loader:'url-loader', option:{ limit:8192, //添加一个name属性，img表示输出的文件夹名，[name]表示文件原名，hash5表示文件名的长度 ext:表示使用图片原来的后缀名 name:'img/[name].[hash:5].[ext]', } } ] }1.option中的limit属性限制文件大小。文件大小小于指定的大小，则进行base64编码，减少http请求数量。返回一个DataURL。此时输出的图片资源是一个base64编码的文件。
2.如果文件体积等于或大于限制，默认情况下将使用file-loader并将所有参数传递给它。此时的图片文件是一个http请求，输出一个http的访问地址。所以这里必须要安装file-loader这个包来处理图片：
npm install file-loader -D更多相关内容 -
webpack打包并将文件加载到指定的位置方法
2020-11-27 09:50:43使用webpack打包，最爽的事情莫过于可以直接require文件了，但是这 同时带来了一个问题，就是所有的文件整合到一起，那这一个包就太大了。 基于此：下面我们来了解下webpack的打包（主要是将如何将我们需要的内容... -
详谈vue+webpack解决css引用图片打包后找不到资源文件的问题
2021-01-19 16:01:12但打完包出来的页面却报找不到资源的错误。 查了一下原因，css引入图片再打包后，style-loader无法设置自己的publicPath，于是我改变了ExtractTextPlugin的css路径publicPath。 if (options.extract) { retur -
webpack vue 项目打包生成的文件,资源文件报404问题的修复方法(总结篇)
2020-11-30 02:56:13最近在使用webpack + vue做个人娱乐项目时，发现npm run build后，css js img静态资源文件均找不到路径，报404错误。。。网上查找了一堆解决办法，总结如下 一、首先修改config目录下的index.js文件 将其中build的... -
webpack打包后不能调用,改用uglifyjs打包压缩
2021-01-30 14:07:35这时候如果用webpack打包，基于webpack特性，会嵌套一层大函数，会将js中的变量变成局部，不能供其他js调用。因此弃用了webpack。选用了uglifyjs。原因：webpack里也有用到uglifyjs的webpack版：uglifyjs-webpack-...展开全文背景：
项目基于原生js,没用到任何脚手架和框架，但也需要打包压缩。
项目的js中声明了一些全局变量 供其他js调用。
这时候如果用webpack打包，基于webpack特性，会嵌套一层大函数，会将js中的变量变成局部，不能供其他js调用。
因此弃用了webpack。选用了uglifyjs。
原因：
webpack里也有用到uglifyjs的webpack版：uglifyjs-webpack-plugin。
打包途径：
打包源文件：dev文件夹下的js文件====>目标文件：js文件夹。
目录结构
使用：
1、如果是es5 使用uglify-js 官网的默认分支就是这个。
2、如果是es6 使用uglify-es 官网的harmony分支 下载下来就是uglify-es。
步骤：
首先确认自己电脑有没有安装node，这是用node启动的。
1、下载uglifyjs 这里我下载的是es版。
npm install uglify-es -D
2、写一个package.json，下面的package.json可以下载下来 直接npm i 就省略了第一步了。
scripts里面是我写的命令
我想在development下打包后也能调试 用到了sourceMap(映射)，
在production下打包压缩。
我的入口文件 起名了entry.js
{
"name": "ocplayermin",
"version": "1.0.0",
"description": "ocplayer min version",
"main": "entry.js",
"scripts": {
"build_min": "NODE_ENV=production node entry.js --progress",
"build_min_dev": "NODE_ENV=development node entry.js --progress"
},
"keywords": [],
"author": "",
"license": "MIT",
"dependencies": {},
"devDependencies": {
"uglify-es": "^3.3.9",
"uglify-js": "^3.7.4"
}
}
注意：NODE_ENV在windows下不兼容 需要安装cross-env插件：npm install cross-env --save-dev
安装完 在 build_min 和 build_min_dev后加上 cross-env 就可以。
3、entry.js代码
打算把dev文件下的js文件打包到js文件中。
代码逻辑：
1、遍历dev文件夹下的所有js文件，获取到文件名和旧路径。
2、生成js文件夹，如果没有js文件夹 则创建，生成新文件的路径。
3、development下 用UglifyJS.minify压缩生成sourceMap文件。
4、production下 由于development环境下生成了.js.map文件，这里删除.js.map，生成.js文件。
遇到的问题：
由于在浏览器读取时,映射 source map读取的文件需要和js是同一个目录 因此需要将前端的端口路径，赋值到.js.map。
例如：地址：127.0.0.1:5500/minversion/index.html；
推荐一款好用的编辑器(用vcode编辑器的open with live server启动项目，默认端口5500)
读取前端js路径：127.0.0.1:5500/minversion/js/xxx.js；
映射生成的路径也得是127.0.0.1:5500/minversion/js/xxx.js.map;如果是'./js/xxx.js.map'是读取不到的。
我新建了一个config.json 专门存取常量，我将前端的端口写在这里 声明为：PLUGIN_URL只要修改这个，entry.js就能读取到。
对source map 不太知道的 可以看官网文档。
config.json
{"pluginUrl":"http://127.0.0.1:5500/minversion"}
entry.js
const path = require('path');
const fs=require('fs');
const UglifyJS = require("uglify-es");//兼容es6
//var UglifyJS = require("uglify-js");//es5
const ORIGIN_PATH='/dev';
const ORIGIN_DIR = '.'+ORIGIN_PATH; // 原目录
const DESTINATION_PATH='/js';
const DESTINATION_DIR = '.'+DESTINATION_PATH;//打包后的目录
var PLUGIN_URL="";/*地址*/
PLUGIN_URL=JSON.parse(fs.readFileSync('./config.json','utf-8')).pluginUrl;
// 遍历目录得到文件信息
function getPath(_path, callback) {
let files = fs.readdirSync(_path);
files.forEach(function(file){
//判断文件是否存在
if (fs.statSync(_path + '/' + file).isFile()) {
callback(_path, file);
}
});
}
//生成压缩后的文件
function buildMin (callback) {
/*如果不存在min 就会创建min文件夹*/
if ( !fs.existsSync(DESTINATION_DIR) ) {
fs.mkdirSync(DESTINATION_DIR);
}
// 运行
getPath(ORIGIN_DIR, function (_path, file) {
let fileName = file.match(/(\S+)(\.\S+)$/)[1]; // 获得文件名
let oldPath = _path + '/' + file, // 原路径
newPath = DESTINATION_PATH + '/' + fileName+'.js'; // 新路径 到不了.js
const _code = fs.readFileSync(oldPath, 'utf-8');
callback(newPath,fileName,_code)
});
}
//删除文件
function deleteFile(delPath, direct) {
delPath = direct ? delPath : path.join(__dirname, delPath)
try {
/**
* @des 判断文件或文件夹是否存在
*/
if (fs.existsSync(delPath)) {
fs.unlinkSync(delPath);
} else {
console.log('inexistence path：', delPath);
}
} catch (error) {
console.log('del error', error);
}
}
if (process.env.NODE_ENV === 'production') {
/*生产环境*/
getPath(DESTINATION_DIR, function (_path, file) {
//删除.map文件
if(file.indexOf('.js.map')>-1){
let delp = _path+'/'+file;
deleteFile(delp)
}
})
//打包
buildMin(function(newPath,fileName,_code){
const minCode = UglifyJS.minify(_code,{
compress:{pure_funcs:'console.log'}
}).code;
fs.writeFileSync('.'+newPath, minCode);
});
}
if (process.env.NODE_ENV === 'development') {
/*开发环境*/
//打包
buildMin(function(newPath,fileName,_code){
var _codeFname = "."+newPath;
var _code_file={};
_code_file[_codeFname]=_code;
const _minObj = UglifyJS.minify(_code_file,{
sourceMap: {
filename:fileName+'.js',
url:PLUGIN_URL+newPath+".map",//生成的就是127.0.0.1:5500/minversion/js/xxx.js.map
includeSources:PLUGIN_URL+newPath+".map",
},
keep_fnames:true,
warnings: true,
});
fs.writeFileSync('.'+newPath, _minObj.code);
fs.writeFileSync('.'+newPath+'.map', _minObj.map);
});
}
至此就打包成功啦，可以复制到自己项目中试一下。记得将源文件夹、目标文件夹改成你的项目路径，还有PLUGIN_URL。
-
webpack 文件打包
2021-06-07 22:12:32使用webpack打包文件 要打包文件，首先我们需要初始化一个项目，前面我们已经创建好了一个 xkd_webpack 的项目，并且这个项目根目录下已经有了一个 package.json 文件、package-lock.json 文件和一个 node_modules ...展开全文上一节中，我们已经安装好了 webpack ，本节我们来学习 何使用 webpack 进行文件打包。
使用webpack打包文件
要打包文件，首先我们需要初始化一个项目，前面我们已经创建好了一个 xkd_webpack 的项目，并且这个项目根目录下已经有了一个 package.json 文件、package-lock.json 文件和一个 node_modules 文件夹，如下所示：
在实际项目中，为了方便管理许多文件，我们可能需要创建一个 src 文件夹存放入口文件等开发文件，然后创建一个 dist 文件夹存放最终打包的文件，还有其他类型的文件，为了方便管理我们也会放在同一个目录下。但是因为我们这里只是举例说一下如何使用 webpack 打包文件，所以我们直接项目根目录下，创建一个静态页面 index.html 和一个 JS 的入口文件 index.js 文件，文件名称是我们自定义的，如果你想使用其他的名称也是可以的。
下面是 index.html 文件的内容：
<html> <head> <meta charset="utf-8"> <title>webpack入门</title> </head> <body> <script type="text/javascript" src="bundle.js"></script> </body> </html>在这个 HTML 文件中我们引入了一个 bundle.js 文件，这个 bundle.js 文件就是最终的打包后的文件，但是现在还没有生成哟，要等我们执行完打包命令后才会生成这个文件。
然后入口文件 index.js 的内容如下所示：
document.write('你好，侠课岛！');最后执行下列命令，就可以成功将 index.js 文件打包到 bundle.js文件中：
webpack index.js -o bundle.js执行命令效果如下所示：
命令执行成功后，项目根目录下会生成一个 bundle.js 文件。这个文件的作用就是用了一个立即执行函数，然后将 index.js 的内容封装成一个函数，作为参数传进内部执行，这样就完成了文件的打包：
此时我们在浏览器中打开 index.html 文件，页面将会显示 “你好，侠课岛！”，这同时也能证明 index.js 文件成功打包到了 bundle.js 文件中，因为我们只在 index.html 文件中引入了 bundle.js 文件。
打包多个文件
当然我们在项目中肯定不只有一个 .js 文件，那么如果我们除了 index.js 文件还有其他的 .js 文件，要如何做呢。
示例：
例如项目中还有一个 module.js 文件，内容如下所示：
module.exports = '侠课岛欢迎你！'这样我们可以修改入口文件 index.js，将创建好的 module.js 模块引入到入口文件中：
document.write('你好，侠课岛！') document.write(require('./module.js')) // 引入模块再次执行 webpack index.js -o bundle.js ，会重新打包文件。
在页面启动时，会先执行 index.js 文件中的代码，其它文件中的代码会在执行到 require 语句的时候再执行。 此时刷新浏览器，我们可以看到浏览器中的显示内容发现了改变，显示内容变为 “你好，侠课岛！侠课岛欢迎你！”。
webpack 会分析入口文件，解析包含依赖关系的各个文件，这些文件都打包到 bundle.js 中。webpack 会给每个模块分配一个唯一的 id 并通过这个 id 索引和访问模块。
总结
在旧版本的 webpack 中，我们是使用 webpack index.js bundle.js 命令来执行打包操作，而新的 webpack4.0+ 版本打包文件时要在命令中加一个 -o ，否则会报错。
链接：https://www.9xkd.com/
-
完美解决webpack打包css背景图片路径问题
2020-11-20 02:01:26在vue组件的style标签内部有如下一段使用背景图片的css代码 background-image: url("../assets/img/icon_add.png"); 在webpack中css-loader的解析配置如下 ...打包后在dist目录的发现没有css文件。这是因为css -
解决vue+webpack打包路径的问题
2020-11-27 01:12:03最近写了一个vue小项目，不想单独作为一个web项目发布，所以就准备放到资源项目的public文件夹下，遇到一些小问题，在此总结一下。 资源路径如下： public目录配置的访问路径为”/”，在这样的情况下，我们的访问... -
webpack打包 图片，样式 等静态资源文件
2022-01-27 09:37:13其实前面的都不足以展示出webpack在众打包工具中的优势 webpack的优势在于 可以打包大规模项目文件 以及静态资源文件 这才是webpack独有的优势 首先我们来创建一个webpack项目 找一个文件夹 在终端中输入 npm init ...展开全文其实前面的都不足以展示出webpack在众打包工具中的优势
webpack的优势在于 可以打包大规模项目文件 以及静态资源文件
这才是webpack独有的优势
首先我们来创建一个webpack项目
找一个文件夹 在终端中输入npm init根据提示操作 就会生成一个package.json
将webpack引入进来
npm install webpack webpack-cli --save-dev然后在终端输入
npm install html-webpack-plugin --save再在终端输入
npm install webpack-dev-server --save打开package.json 给 scripts 添加上
“build”: “webpack-dev-server”,
“webpack”: “webpack”
两个配置
在根目录建立src文件夹
在src下创建一个assets文件夹
里面放一个css文件和一个图片
和我同名就可以直接复制代码了 之后可以看明白在改名
carnival.png
index.css* { color: red; }在src下创建index.html
index.html参考代码如下<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id = "text"></div> </body> </html>在src下创建output.js
output.js参考代码如下import carnival from "./assets/carnival.png" import indexcss from "./assets/index.css" const output = () => { console.log("资源加载"); let cssin = document.createElement("link"); cssin.setAttribute("href",indexcss); cssin.setAttribute("rel","stylesheet"); document.querySelector("head").appendChild(cssin); document.getElementById("text").innerHTML = `引入成功<img style = "width: 10em;height: 10em;" src = ${carnival}/>`; } export default output在src下创建index.js
index.js参考代码如下import output from "./output" window.onload = function() { output(); }在项目根目录创建webpack.config.js
webpack.config.js参考代码如下//通过node获取到当前文件的位置 const path = require('path') //导入刚引入的第三方插件html-webpack-plugin const HtmlWebpackPplugin = require('html-webpack-plugin') module.exports = { //设置当前入口文件 entry: './src/index.js', //出口配置 output: { //打包的文件名 filename: 'bundle.js', //生成的文件位置 path: path.resolve(__dirname, './distribution') //设置自动清理掉原本的打包文件 //clean: true }, mode: 'none', //webpack插件配置 plugins: [ //实例化html-webpack-plugin插件功能 new HtmlWebpackPplugin({ //html-webpack-plugin参数配置 //指定打包HTML文件参照的模板HTML template: './src/index.html', //生成的html文件名称 filename: 'app.html', //定义打包的js文件引入在新html的哪个标签里 inject: 'head' }) ], //设置webpack-dev-server监听属性 devServer: { //设置webpack-dev-server监听路径 static: './distribution' }, //设置文件格式处理 module: { rules: [ { //转换文件格式 test: /\.png$/, //文件打包方式 type: 'asset', //文件打包代理路径和名称 这里我们采用随机 generator: { filename: `./assets/[contenthash][ext]` } }, { //转换文件格式 test: /\.css$/, //文件打包方式 type: 'asset', //文件打包代理路径和名称 这里我们采用随机 generator: { filename: `./assets/[contenthash][ext]` } } ] } }然后我们在终端执行
npm run webpack重新打包
然后执行npm run build启动项目
用终端路径访问浏览器
点击app.html
可以看到 css 样式 和 图片都加载出来了
-
Webpack 打包文件核心源码
2022-05-10 17:22:58打包后的文件就是一个函数自调用，当前函数调用时传入一个对象 这个对象我们为了方便将之称为模块定义，它就是一个键值对 这个键名就是当前被加载模块的文件名与某个目录的拼接 这个键值就是一个函数，和 node.js 里... -
webpack打包文件在本地与线上运行
2022-03-30 20:05:42根据上一篇webpack打包优化之后，想将成果物在本地打开运行，发现只能展示空白页面。为何将成果包扔在线上可以正常运行呢，本文探讨一下。 本地运行 打包后的成果物文件如下图所示。 直接打开index.html文件，页面... -
解决vue-cli webpack打包后加载资源的路径问题
2020-12-10 23:48:40vue项目，访问打包后的项目，输入路径后，页面加载空白。这时会有两类问题，都是路径问题。 1.一个是css,js,ico等文件加载不到，是目录里少了dist 打开页面时一片空白 解决办法： config/index.js文件的build->... -
webpack 打包（plugin、loader 工作原理）
2022-05-07 15:13:55Webpack 作为 模块打包器（Module bundler），可以把零散的文件打包到一个 JS 中，对于有环境兼容的代码可以在打包过程中通过 模块加载器（Loader） 对其进行编译转换 Webpack 还具备 代码拆分（Code Splitting） ... -
webpack打包
2021-12-10 08:41:15webpack是一个流行的前端项目构建工具（打包工具），因为我们目前web开发会有下面几个问题： 文件之间互相依赖关系复杂 浏览器对于Es6的模块化支持不是很友好 浏览器对于js的新语法特性兼容性也不是很好 webpack... -
webpack不打包指定的js文件
2021-04-28 01:14:59因此在项目打包的时候，不希望保持IP地址的文件被打包，因此就需要把需要修改的常量独立出来，存放在一个js文件中，且不被压缩。解决步骤：1、新建一个js文件，并存放在static文件夹下，例如新建一个webSockrtUrl.js... -
React 使用webpack打包
2022-03-08 21:33:441、新建一个项目文件夹，打开终端，切换到到项目目录下： npm init -y 这时候使用webstorm等高级的编辑器打开项目执行下面步骤效果会更直观。 2、新建一个文件夹public，在文件夹内创建index.html文件，添加： ... -
webpack打包vue项目放到tomcat下访问不到
2020-05-15 16:02:23如果我们直接将我们前段代码放到Tomcat下的webapps/中的话，我们的 找到这个文件后 -
WebPack实战 WebPack打包Vue项目
2022-05-09 07:39:04文章目录前言一、使用webpack来进行vue-cli模块化开发二、Webpack配置区分开发环境和生产环境三、vue项目打包3.1、config—index.js...本篇博客是关于Webpack打包vue的配置以及一些问题解决整理，若文章中出现相关问题 -
vue项目之webpack打包静态资源路径不准确
2018-10-19 21:24:43静态资源如js访问不到 分析并且解决问题 明确一点的就是，看到报错404，找不到静态资源，很明显，路径错误了。 静态资源找不到如js文件 资源打包路径有误，打包后的资源使用了绝对根目录路径，因此将项目... -
webpack打包教程
2021-03-07 07:42:58创建package.json文件命令：npm init安装webpacknpm install --save-dev webpacknpm install --save-dev webpack-cli全局安装：npm install --global webpack webpack-cli打包默认entry入口 src/index.js默认output... -
webpack打包流程
2022-02-14 16:42:19webpack：是一个用于现代 JavaScript 应用程序的静态模块打包工具。当 webpack 处理应用程序时，它会在内部从一个或多个入口点构建一个依赖图(dependency graph)，然后将你项目中所需的每一个模块组合成一个或多个... -
webpack打包后访问不到json文件
2017-12-03 12:55:00在vue中，前端写ajax假数据，用axios将json数据渲染到组件中，开发期间一切正常，webpack打包压缩后，json文件的路径错误，页面访问不到数据，导致渲染失败。 二、预期结果 能正常获取数据，渲染页面。 三、问题... -
使用 webpack 打包 ts 代码
2022-03-17 13:20:41使用 webpack 打包 ts 代码 -
Webpack打包
2020-11-19 17:10:20Webpack打包 -
webpack打包后引用cdn的js_用CDN的react webpack打包文件
2021-02-20 14:24:27此文不介绍webpack基本配置，如果对基本配置有疑问请查阅官方文档。 1.配置webpack.config.js 将output.publicPath改成上传到的cdn地址, 例（对应上面上传配置）： publicPath: ... -
webpack打包原理和manifest文件分析
2018-04-19 17:07:14文件依赖管理 梳理文件之间的依赖关系资源加载管理 处理文件的加载顺序（先后时机）和文件的加载数量（合并、嵌入、拆分）效率与优化管理 提高开发效率，完成页面优化webpack是一个现代Javascript应用的打包工具。... -
Vue项目webpack打包部署到Tomcat刷新报404错误问题的解决方案
2020-12-09 14:16:25使用webpack打包vue后，将打包好的文件，发布到Tomcat上，访问成功，但是刷新后页面报404错。 在网上查找了一下，原来是HTML5 History 模式引发的问题，具体为什么，vue官方已经给出了解释，你可以看... -
webpack打包配置/路由组件打包、路由打包
2021-06-07 16:53:49/* 配置一个webpack，需要安装 webpack webpack-cli yarn add webpack webpack-cli -D 或者 npm install webpack webpack-cli -D 先配置一个 package.json yarn init 或者 ...同时他也是webpack的默认配置文件 配置
