Webpack 学习
2021-06-04 19:03
标签：node load name str 一个 reac ack res main 从本质上讲，Webpack是一个现代Javascript应用的静态模块打包工具，它可以分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。 loader: test: 用来匹配loaders所处理文件的拓展名的正则表达式 loader:loader的名称 当重新打包后，运行项目会出现图片路径错误。这时候就要在output下重新添加publicPath：‘/打包后图片存储路径‘ ES6语法处理 在webpack中直接使用babel对应的loader。,babel是一种javascript编译器，它可以javascript编译成可以执行的版本 Webpack 学习 标签：node load name str 一个 reac ack res main 原文地址：https://www.cnblogs.com/WEPEDBlogs/p/12334054.html什么是文本pack
安装webpack
1 //全局安装
2 npm install -g webpack
3 //安装到项目目录
4 npm install webpack --save-dev
webpack配置文件
const path = require(‘path‘)
//_dirname 是 node.js 中的一个全局变量，它指向当前执行脚本所在的目录
module.exports={
entry: ‘./src/main.js‘, // 要打包的文件入口
output: {
path: path.resolve(__dirname, ‘dist‘), //打包后的绝对输出路径
filename: "bundle-text.js", // 打包输出后的文件名
},
}
// 配置图片，在小于limit给出字节数以下的转化为base64，大于limit给出的字节数时通过file-loader模块加载，显示原图片
{
test: /\.(png|jpe?g|gif|svg|cur)(\?.*)?$/,
loader: ‘url-loader‘,
options: {
limit: 10000,
name: ‘img/[name].[hash:8].[ext]‘//打包后图片命名
}
}
rules: [
//js 匹配所有的js，用babel-loader转译 排除掉node_modules
{
test: /(\.jsx|\.js)$/,
use: {
loader: "babel-loader"
},
exclude: /node_modules
},
上一篇：MuJS官网示例讲解
下一篇：一道关于JS作用域的面试题