webpack是一个js的静态模块打包器(module bundler)。当webpack处理应用程序时,它会递归地构建一个依赖关系图。其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个bundle。
默认配置文件命名:webpack.config.js
mode开发模式:production、development
常见几个概念:
1、entry:入口文件
2、output:在哪里输出它所创建的bundles,以及如何命名这些文件。
3、loader:让webpack能够去处理那些非js文件(webpack自身只理解js)。loader可以将所有类型的文件转换为webpack能够处理的有效模块,然后利用打包能力,对它们进行处理。
4、plugin:插件则可以用于执行范围更广的任务。插件的范围包括,从打包优化和压缩,一直到重新定义环境中的变量。插件接口功能极其强大,可以用来处理各种各样的任务。
mkdir webpack_test && cd webpack_test //创建webpack_test目录并进入
npm init -y //初始化package.json
//无需全局下载webpack
npm i webpack -D
npm i webpack-cli -D //4.X以上版本需下载webpack-cli
项目文件夹当前目录:
//webpack.config.js
const path = require("path");
module.exports = {
mode: "development",//开发环境调试写development,生产环境打包写production
entry: "./src/js/index.js",//可配置一个入口,也可配置多个入口文件
output: {
path: path.resolve(__dirname,"dist"), //表明打包后的文件夹名为dist
filename: "main.js"
}
}
执行npx webpack进行构建
构建后的项目目录: