一、文件夹初始化,生成package.json文件
npm init -y
二、安装cli工具 webpack 库
npm i --save-dev webpack webpack-cli
三、测试运行webpack
局部安装 : npx webpack --version
全局安装 : webpack --version
四、创建 webpack.config.js 配置文件
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin"); // 引用插件 使用插件要先通过 npm 安装
module.exports = {
mode: "development", //production (生产模式) development (开发模式)
entry: "./src/index.js", //入口文件 指示webpack以哪个文件作为入口起点开始打包,分析构建内部依赖图。
output: { //出口文件 output 属性告诉 webpack 在哪里输出它所创建的 bundle,以及如何命名这些文件。主要输出文件的默认值是 ./dist/main.js,其他生成文件默认放置在 ./dist 文件夹中。
path: path.resolve(__dirname, "dist"), // 指定输出文件夹
filename: "build.js" // 指定输出文件名
},
//loader webpack 只能理解 JavaScript 和 JSON 文件,这是 webpack 开箱可用的自带能力。loader 让 webpack 能够去处理其他类型的文件,并将它们转换为有效 模块,以供应用程序使用,以及被添加到依赖图中
// 在更高层面,在 webpack 的配置中,loader 有两个属性:
// 1、test 属性,识别出哪些文件会被转换。
// 2、use 属性,定义出在进行转换时,应该使用哪个 loader。
module: {
rules: [{ test: /\.txt$/, use: 'raw-loader' }],
},
// plugin 插件 插件则可以用于执行范围更广的任务。包括:打包优化,资源管理,注入环境变量。
// 使用插件要先通过 npm 安装
// 想要使用一个插件,你只需要 require() 它,然后把它添加到 plugins 数组中。多数插件可以通过选项(option)自定义。你也可以在一个配置文件中因为不同目的而多次使用同一个插件,这时需要通过使用 new 操作符来创建一个插件实例。
plugin: [new HtmlWebpackPlugin({ template: './index.html' })]
}
五、 运行webpack
npx webpack