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

     ps: 有时打包的时候提示xxx not fund 解决方案:

     • 方法一: 安装缺的模块 npm i xxx --save-dev
     • 方法二: 把webpack和webpack-cli卸载后重装,有时它们出问题了,丢失了某些东西
     • 卸载方法 npm uninstall webpack -g npm uninstall 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 demo4

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

   • 配置htmlWebpackPlugin

   • 配置devServer(看webpack文档)

   • 运行命令 webpack-dev-server

   • 配置 npm run dev启动命令 (或者npm run start是怎么来的)

     在package.json的scripts里配置的

     <pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="" style="box-sizing: border-box; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; overflow: visible; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit;">

     <textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" style="box-sizing: border-box; color: inherit; font: inherit; position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"></textarea>

     <pre class=" CodeMirror-line " role="presentation" style="box-sizing: border-box; font-family: inherit; break-inside: avoid; padding: 0px 4px; border-radius: 0px; border-top-width: 0px; border-right: none; border-bottom-width: 0px; border-left-width: 0px; background: 0px 0px; font-size: inherit; margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; color: inherit; z-index: 2; position: relative; overflow: visible; word-break: normal; width: inherit;"> "scripts": {</pre>

     <pre class=" CodeMirror-line " role="presentation" style="box-sizing: border-box; font-family: inherit; break-inside: avoid; padding: 0px 4px; border-radius: 0px; border-top-width: 0px; border-right: none; border-bottom-width: 0px; border-left-width: 0px; background: 0px 0px; font-size: inherit; margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; color: inherit; z-index: 2; position: relative; overflow: visible; word-break: normal; width: inherit;">"dev": "webpack-dev-server",</pre>

     <pre class=" CodeMirror-line " role="presentation" style="box-sizing: border-box; font-family: inherit; break-inside: avoid; padding: 0px 4px; border-radius: 0px; border-top-width: 0px; border-right: none; border-bottom-width: 0px; border-left-width: 0px; background: 0px 0px; font-size: inherit; margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; color: inherit; z-index: 2; position: relative; overflow: visible; word-break: normal; width: inherit;"> "test": "echo "Error: no test specified" && exit 1"</pre>

     <pre class=" CodeMirror-line " role="presentation" style="box-sizing: border-box; font-family: inherit; break-inside: avoid; padding: 0px 4px; border-radius: 0px; border-top-width: 0px; border-right: none; border-bottom-width: 0px; border-left-width: 0px; background: 0px 0px; font-size: inherit; margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; color: inherit; z-index: 2; position: relative; overflow: visible; word-break: normal; width: inherit;"> },</pre>

     </pre>

   技术演讲:

   1. 入口和出口的配置
   2. css-loader的配置