广州网站建设出名 乐云践新,专业的做网站公司,学ps可以做网站策划吗,网站广告推广哪家好文章目录 1.基本介绍2.功能介绍3.简单使用3.1 文件目录和内容3.2 下载依赖3.3 启动webpack 4.基本配置4.1 五大核心概念4.2 基本使用 1.基本介绍 Webpack 是一个静态资源打包工具。它会以一个或多个文件作为打包的入口, 将我们整个项目所有文件编译组合成一个或多个文件输出出去… 文章目录 1.基本介绍2.功能介绍3.简单使用3.1 文件目录和内容3.2 下载依赖3.3 启动webpack 4.基本配置4.1 五大核心概念4.2 基本使用 1.基本介绍 Webpack 是一个静态资源打包工具。它会以一个或多个文件作为打包的入口, 将我们整个项目所有文件编译组合成一个或多个文件输出出去。 输出的文件就是编译好的文件, Webpack 输出的文件叫做 bundle。
2.功能介绍
开发模式: 仅能编译 JS 中的 ES Module 语法。生产模式: 能编译 JS 中的 ES Module 语法, - 还能压缩 JS 代码。
3.简单使用
3.1 文件目录和内容 1.count.js
export default function count(x, y){return x y;
}2.sum.js
export default function sum(...args) {return args.reduce((p, c) p c, 0);
}3.main.js
import count from ./js/count;
import sum from ./js/sum;console.log(count(2, 1));
console.log(sum(1, 2, 3, 4));3.2 下载依赖
1.初始化package.json
npm init -y2.下载依赖
npm i webpack webpack-cli -D3.3 启动webpack
1.开发模式
npx webpack ./src/main.js --modedevelopment2.生产模式
npx webpack ./src/main.js --modeproductionnpx webpack: 是用来运行本地安装 Webpack 包的。 ./src/main.js: 指定 Webpack 从 main.js 文件开始打包, 不但会打包 main.js, 还会将其依赖也一起打包进来。 –modexxx: 指定环境。 默认 Webpack 会将文件打包输出到 dist 目录。
index.html引用dist下的man.js 4.基本配置
4.1 五大核心概念
entry入口: 指示 Webpack 从哪个文件开始打包。output输出: 指示 Webpack 打包完的文件输出到哪里去, 如何命名等。loader加载器: webpack 本身只能处理 js、json 等资源, 其他资源需要借助 loader。plugins插件: 扩展 Webpack 的功能。mode模式: 开发模式(development), 生产模式(production)。 webpack.config.js:
module.exports {// 入口entry: ,// 输出output: {},// 加载器module: {rules: [],},// 插件plugins: [],// 模式mode: ,
};Webpack 是基于 Node.js 运行的, 所以执行commonJS规范。
4.2 基本使用
// Node.js的核心模块专门用来处理文件路径
const path require(path);module.exports {// 入口// 相对路径和绝对路径都行entry: ./src/main.js,// 输出output: {// path: 文件输出目录必须是绝对路径// path.resolve()方法返回一个绝对路径// __dirname 当前文件的文件夹绝对路径path: path.resolve(__dirname, dist),// filename: 输出文件名filename: main.js,},// 加载器module: {rules: [],},// 插件plugins: [],// 模式mode: development, // 开发模式
};npx webpack
