-
webpack是什么,有哪些同类工具
- webpack项目打包工具,项目构建工具,有什么作用
构建单页应用(disk) npm i http-server -g
代码压缩
...... (2) 同类工具
百度fis3
grunt
gulp
-
webpack最大的特点
- 一切皆模块
-
webpack安装
安装node(node提供了npm)
设置淘宝镜像: nodejs的模块(插件)存放在网站,https://www.npmjs.com,淘宝镜像会同步该网站的模块 设置方法: npm config set registry http://registry.npm.taobao.org/
npm i webpack -g (-g全局安装, --save-dev安装到本目录)
npm i webpack-cli -g
-
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, 插件
-
入口和出口(输出) demo1
新建一个文件夹
初始化package.json npm init -y
-
新建webpack.config.js文件(固定的),配置入口和出口
入口: 项目从哪里开始打包,打包的过程中,把相关的文件全部打成一个包, ps:入口文件通常叫main.js
出口: 打包完成之后,文件名叫什么,放到哪里
在项目的目录运行打包命令 webpack
-
模式(环境) mode配置(详细请看webpack文档) demo1
mode: 'development' 开发环境
mode: 'production' 生产环境
-
loader 加载器(解释器)
在webpak世界里,一切皆模块
webpack默认只认识js模块,其它的模块都需要相应的loader来解析(解释)
-
配置css-loader(步骤)
新建demo2
初始化package.json
配置入口和出口
配置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
-
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 配置全局变量
-
-
alias别名配置(为什么@能代替src)
-
dev-server
安装 npm i webpack-dev-server -g
配置htmlWebpackPlugin
配置devServer
运行命令 webpack-dev-server
npm run dev(或者npm run start是怎么来的)
