webpack 基础入门

1. webpack是什么,有哪些同类工具

   1. webpack项目打包工具,项目构建工具,有什么作用

   • 构建单页应用(disk) npm i http-server -g

   • 代码压缩

   • ...... (2) 同类工具

   • 百度fis3

   • grunt

   • gulp

   2. webpack最大的特点

      1. 一切皆模块

2. webpack安装

   • 安装node(node提供了npm)

   • 设置淘宝镜像: nodejs的模块(插件)存放在网站,https://www.npmjs.com,淘宝镜像会同步该网站的模块 设置方法: npm config set registry http://registry.npm.taobao.org/

   • 文档地址: https://www.webpackjs.com

   • npm i webpack -g (-g全局安装, --save-dev安装到本目录)

   • npm i webpack-cli -g

3. nodejs模块系统

   • 导出 // m1.js const cat = { age: 2, name: '白猫' } module.exports = cat;

   • 导入 index.js const aa = require('./cat.js'); consoe.log(aa.name);

   • 打开命令提示父,进入index.js所在目录,运行node index.js 看是否打印出"白猫"

webpack的核心概念

webpack的核心概念有四个: 入口和出口, 模式, loader, 插件

1. 入口和出口(输出) demo1

   • 新建一个文件夹

   • 初始化package.json npm init -y

   • 新建webpack.config.js文件(固定的),配置入口和出口

     • 入口: 项目从哪里开始打包,打包的过程中,把相关的文件全部打成一个包, ps:入口文件通常叫main.js

     • 出口: 打包完成之后,文件名叫什么,放到哪里

   • 在项目的目录运行打包命令 webpack

2. 模式(环境) mode配置(详细请看webpack文档) demo1

   1. mode: 'development' 开发环境

   2. mode: 'production' 生产环境

3. loader 加载器(解释器)

   • 在webpak世界里,一切皆模块

   • webpack默认只认识js模块,其它的模块都需要相应的loader来解析(解释)

   • 配置css-loader(步骤)

     1. 新建demo2

     2. 初始化package.json

     3. 配置入口和出口

     4. 配置css-loader

     • 在npmjs.com找到css-loader,安装上面的说明进行配置

     • 配置好之后,执行打包命令

     • 新建一个html文件把打包出来的js文件放进去html运行检查效果

     • 注: css-loader依赖style-loader,所以要安装style-loader npm i style-loader --save-dev

   • 配置less-loader

     • 配置方法类似css-loader

   • 错误信息 You may need an appropriate loader to handle this file type 你需要配置一个合适的loader

4. plugins 插件 demo3

   • html插件 html-webpack-plugin

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

     • 导入html-webpack-plugin模块

     • 配置(webpack文档)

     • 踩坑: Cannot find module 'webpack/lib/node/NodeTemplatePlugin' 解决方案 npm link webpack --save-dev

   • webpack.DefinePlugin 配置全局变量

5. alias别名配置(为什么@能代替src)

6. dev-server

   • 安装 npm i webpack-dev-server -g

   • 配置htmlWebpackPlugin

   • 配置devServer

   • 运行命令 webpack-dev-server

   • npm run dev(或者npm run start是怎么来的)