说明
玩转webpack课程学习笔记。
1、为什么需要构建工具
1、转换 ES6 语法
2、转换 JSX
3、CSS 前缀补全/预处理器
4、压缩混淆
5、图片压缩
2、前端构建演变之路
大致过程：
ant + YUI Tool grunt ==> gulp fis3 ==> webpack parcel rollup
3、为什么选择webpack
1、社区生态丰富
2、配置灵活和插件化扩展
3、官方更新迭代速度快
4、初识webpack
1、配置文件名称
- webpack 默认配置文件：webpack.config.js
- 可以通过 webpack --config 指定配置文件
比如：webpack --config webpack.dev.config.js
2、webpack 配置组成
module.exports = { entry: './src/index.js', // 打包的⼊入⼝口⽂文件 output: './dist/main.js', // 打包的输出 mode: 'production', // 环境 module: { // Loader 配置 rules: [ { test: /\.txt$/, use: 'raw-loader' } ] }, plugins: [ // 插件配置 new HtmlwebpackPlugin({ template: './src/index.html' }) ] };
5、环境搭建：安装webpack
1、安装 Node.js 和 NPM
2、安装 webpack 和 webpack-cli
- 创建空文件夹
- 文件夹里执行
npm init -y，会生成package.json文件 - 执行
npm install webpack webpack-cli --save-dev - 检查是否安装成功：
./node_modules/.bin/webpack -v
6、webpack初体验：一个最简单的例子
1、编写 webpack.config.js 文件
const path = require('path'); module.exports = { entry: './src/index.js', output: { path: path.join(__dirname, 'dist'), filename: 'bundle.js' }, mode: 'production' };
2、src文件夹里创建两个js文件
// index.js import { helloWebpck } from './helloWebpack'; document.write(helloWebpck());
// helloWebpck.js export function helloWebpck() { return 'Hello Webpack!'; }
3、执行打包命令，成功之后会生成dist文件夹，里面有bundle.js
./node_modules/.bin/webpack
4、在生成的dist文件夹里新建一个index.html文件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>hello webpack</title> </head> <body> <script src="./bundle.js"></script> </body> </html>
5、浏览器打开index.html文件
7、通过npm script 脚本运行webpack
1、通过 npm run build 运行构建
2、原理：模块局部安装会在 node_modules/.bin ⽬目录创建软链接
{ "name": "my-project", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "webpack" }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "webpack": "^4.43.0", "webpack-cli": "^3.3.11" } }
