webpack 基本应用

【注意】只过一遍知识点，不再详细代码演示了。

安装和配置 —— 拆分 dev prod 配置，然后 merge

• 安装 nodejs

• 初始化 npm init -y

• 安装插件 npm i webpack webpack-cli webpack-merge --save-dev

• 新建 src 及其测试 js 代码（包含 ES6 模块化）

• 创建配置文件

• 增加 scripts ，运行

• 安装 npm i clean-webpack-plugin --save-dev

• 配置 prod

本地服务和代理

• 新建 index.html
• 安装 npm i html-webpack-plugin --save-dev ，并配置
• 安装 npm i webpack-dev-server --save-dev ，并配置
• 修改 scripts 的 dev ，运行

处理 ES6

先引入简单的 babel ，polyfill 以后会单独讲

• 安装 npm i @babel/core @babel/preset-env babel-loader --save-dev
• 配置 webpack module
• 配置 .babelrc
• 运行 dev

处理样式

基本使用

• 安装 npm i style-loader css-loader less-loader less --save-dev （注意要安装 less）
• 配置 webpack module
• 新建 css less 文件，引入 index.js
• 运行 dev

postcss

• 安装 npm i postcss-loader autoprefixer -D
• 新建 postcss.config.js
• 配置 webpack module ，增加 postcss-loader
• 增加 css transform: rotate(-45deg);
• 运行 dev

处理图片

考虑 base64 格式

• 安装 npm i file-loader url-loader --save-dev
• 分别配置 webpack.dev 和 webpack.prod
• 新建图片文件，并引入到 js 中，插入页面
• 运行 dev
• 运行 build