1. 初探webpack
1.1 webpack究竟是什么
- 粗暴且浅显的当做抬举版JS翻译器
- 避免面向过程组织代码，难以维护，要分模块
- 在index.html中，script标签引入过多，增加http请求数量，且会因为引入顺序导致执行先后的bug
npm init
npm install webpack-cli —save-dev // 直接安装webpack-cli会默认安装webpack
npm install webpack --save // 安装webpack
npx webpack index.js //用webpack翻译index.js这个文件
// 生成一个dist文件夹 更改index.html引入路径
// <script src='./dist/main.js'></script>
代码 01-01
1.2 什么是模块打包工具？
- webpack is a module bundler
- 模块打包工具可以识别模块引入语法，然后生成可执行代码
- 从单纯的JS模块打包工具发展到打包任何文件
- ES Moudule 模块引入
export default Header;
import Header from './header.js';
- CommonJS 模块引入规范
module.exports = Header;
var Header = require('./header.js');
代码 01-02
1.3 Webpack的正确安装方式
npm init // 以node规范的方式创建包文件
npm init -y // 一路yes
// 全局安装删除
// 同一台机器 不同项目webpack版本不同 全局安装隐患
npm install webpack webpack-cli -g
npm uninstall webpack webpack-cli -g
yarn global add webpack webpack-cli
yarn global remove webpack webpack-cli
// 局部安装 切换到当前目录
npm install webpack webpack-cli --save-dev
yarn add webpack webpack-cli --save-dev
// --save-dev === -D
webpack -v // 全局搜索webpack
npx webpack -v // 当前文件夹中寻找
npm info webpack // 查看所有版本号
npm install webpack@4.16.5 webpack-cli -D // 安装特定版本
npm install // 安装依赖
代码 01-03
1.4 使用Webpack的配置文件
- 项目webpack默认配置文件(不写就会有默认配置) webpack.config.js
- npx webpack index.js, 若只执行npx webpack则报错，找不到入口文件，此时需在webpack.config.js中配置
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
}
path是打包出的文件放在哪里（需引入path模块, path.resolve） __dirname为webpack.config.js当前同级目录
- 当默认配置文件名字有改变(webpackconfig.js)
npx webpack --config webpackconfig.js
-
三种运行webpack方式
- global => webpack index.js
- local => npx webpcak index.js
- npm scripts => npm run bundle（会先local查找后global查找）
"scripts": { "bundle": "webpack" }, -
安装webpack-cli的作用是使命令行可以运行webpack
代码 01-04
1.5 浅析 Webpack 打包输出内容
- 打包信息里 main的含义，不写是默认的
- mode不写默认production，打包后压缩，配置development，打包代码不会压缩
代码 01-05
