2.webpack(基于node开发出来)
1. webpack是一个打包工具2. webpack相对于gulp, grunt等工具更进一步(会基于配置项自动构建项目)3. webpack学习曲线更加陡峭
3.webpack的能力
1. webpack可以打包文件2. webpack插件提供的额外功能(项目自动部署上线, 清空目录)3. Hot Module Reload(react中的html)
4.webpack中的module和打包流程
webpack是建立在module之上进行打包的
1. 把index.js发送到webpack中解析, 找到后缀(loaders决定怎么编译)2. babel-loader是用来把es6转为es5(还有其他功能)3. 结合所有文件生成app.js上线4. Split point(分割文件, 拆分app.js)
Enty: 入口文件Plugins: 插件(某个生命周期, 某个位置会执行)loaders: 编译output: 项目生成后放置位置Split point: 拆分
5.webpack中的配置文件
* webpack.config.js决定了打包的规则* webpack遵循commonJS规范(require引入, module.exports导出)* 在webpack中loader使用是从右至左, 从下至上——> use: [‘style-loader‘, ‘css-loader‘]* resolve配置默认执行的文件后缀
6.webpack的最基础使用
1. 安装node.js和npm 2. 安装webpack模块(npm install webpack -g)3. 执行webpack命令(webpack index.js bundle.js)
打包案例
### header.jsmodule.exports = function() { ???console.log("header")}### index.jsconst header = require(‘./header.js‘)console.log(header());console.log("index content")
7.webpack使用配置文件打包项目
案例
1. 创建一个app的文件夹, 下面有index.js和header.js2. 根目录创建一个webpack.config.js### header.jsexport default (text = "hello webpack") => { ???const element = document.createElement("div"); ???element.innerHTML = text; ???return element;}### index.jsimport header from ‘./header.js‘document.body.appendChild(header());### webpack.config.jsconst path = require("path"); ?const PATH = { ???app: path.join(__dirname, ‘app‘), ??????//当前绝对路径 ???build: path.join(__dirname, ‘build‘) ???//导出绝对路径};module.exports = { ???????entry: { ???????app: PATH.app ???}, ???output: { ???????path: PATH.build, ???????filename: ‘[name].js‘ ???}}
8.webpack插件(html-webpack-plugin)自动生成一个html文件,并且自动引入了打包生成的app.js文件
1. npm install html-webpack-plugin2. 在webpack.confing.js中导入const HtmlWebpackPlugin = require("html-webpack-plugin");3. 在module.exports中添加plugins: [ ???new HtmlWebpackPlugin({})]4. 执行webpack,如果报错NodeTemplatePlugin就局部安装webpack