webpack 是什么
webpack 是一种前端资源构建工具，一个静态模块打包器(module bundler)。在 webpack 看来, 前
端的所有资源文件(js/json/css/img/less/...)都会作为模块处理。它将根据模块的依赖关系进行静态分
析，打包生成对应的静态资源(bundle)。
webpack 五个核心概念
Entry ：入口(Entry) 指示 webpack 以哪个文件为入口起点开始打包，分析构建内部依赖图。
Output ：输出(Output) 指示 webpack 打包后的资源 bundles 输出到哪里去，以及如何命名。
Loader ：Loader 让 webpack 能够去处理那些非 JavaScript 文件 (webpack 自身只理解 JavaScript)
Plugins ：插件(Plugins) 可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量等
Mode ：模式(Mode) 指示 webpack 使用相应模式的配置。
webpack 的初体验
初始化 package.json
输入指令: npm init -y
下载并安装 webpack
npm install webpack webpack-cli -g npm install webpack webpack-cli -D # 本地安装 npm i webpack@4.41.6 webpack-cli@3.3.11 -D
编译打包应用
1. 创建文件
2. 运行指令
开发环境指令： webpack src/js/index.js -o build/js/built.js --mode=development
功能： webpack 能够编译打包 js 和 json 文件，并且能将 es6 的模块化语法转换成浏览器能识别的
语法。
生产环境指令： webpack src/js/index.js -o build/js/built.js --mode=production
功能：在开发配置功能上多一个功能，压缩代码。
3. 结论
webpack 能够编译打包 js 和 json 文件。
能将 es6 的模块化语法转换成浏览器能识别的语法。
能压缩代码。
4. 问题
不能编译打包 css 、 img 等文件。
不能将 js 的 es6 基本语法转化为 es5 以下语法
webpack 开发环境的基本配置
创建配置文件
1. 创建文件 webpack.config.js
2. 配置内容如下
const { resolve } = require( 'path'); // node 内置核心模块，用来处理路径问题。 module.exports = { entry: './src/js/ index .js', // 入口文件 output: { // 输出配置 filename: './built.js', // 输出文件名 path: resolve(__dirname, 'build/js') // 输出文件路径配置 }, mode: 'development' //开发环境 };
3. 运行指令 : webpack
4. 结论 : 此时功能与上节一致
打包样式资源
1. 创建文件
2. 下载安装 loader 包
npm i css-loader@3.4.2 style-loader@1.1.3 less-loader@5.0.0 less@3.11.1 -D
3. 修改配置文件
// resolve 用来拼接绝对路径的方法 const { resolve } = require('path'); module.exports = { // webpack 配置 // 入口起点 entry: './src/index.js', // 输出 output: { // 输出文件名 filename: 'built.js', // 输出路径 // __dirname nodejs 的变量，代表当前文件的目录绝对路径 path: resolve(__dirname, 'build') }, // loader 的配置 module: { rules: [ // 详细 loader 配置 // 不同文件必须配置不同 loader 处理 { // 匹配哪些文件 test: /\.css$/, // 使用哪些 loader 进行处理 use: [ // use 数组中 loader 执行顺序：从右到左，从下到上 依次执行 // 创建 style 标签，将 js 中的样式资源插入进行，添加到 head 中生 效 'style-loader', // 将 css 文件变成 commonjs 模块加载 js 中，里面内容是样式字符 串 'css-loader' ] }, { test: /\.less$/, use: [ 'style-loader', 'css-loader', // 将 less 文件编译成 css 文件 // 需要下载 less-loader 和 less less-loader' ] } ] }, // plugins 的配置 plugins: [ // 详细 plugins 的配置 ], // 模式 mode: 'development', // 开发模式 // mode: 'production' }
