什么是webpack?
webpack 可以看做是是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle。
webpack的优点
- 自带模块化(commonjs规范)
- 编译功能:可以将es6 代码转换为es5 ,将 jsx代码转换为es5 , typescript代码转换为javascript,less代码转换为css
- gulp所做的事情,webpack都可以做到
- 自带服务器,服务器基于Node(webpack-dev-server)
webpack初识
webpack共有4个版本分别是:1.x 、2.x 、3.x 、4.x版本 , 目前前端最流行的两大框架React和Vue中经常会用到webpack , 由此可见webpack使用的广泛程度
1.安装全局环境
npm install -g webpack webpack-cli
2.创建项目,初始化package.json文件
npm init
3.安装项目依赖的webpack
npm install --save-dev webpack webpack-cli
4.项目根目录创建两个文件夹src和dist
src : 存放源码文件
dist : 存放打包之后的文件
5.编写代码Hello Webpack
app.js:document.write("Hello Webpack");
6.在项目根目录增加配置文件webpack.config.js
const path = require('path');
module.exports = {
entry:"./src/app.js",
output:{
path: path.resolve(__dirname, 'dist'),
filename:"bundle.js"
}
}
执行 :
webpack
7.编写模块化代码
app.js:
var hello = require("./hello.js");
document.getElementsByTagName("body")[0].appendChild(hello());
demo.js:
module.exports = function(){
var divs = document.createElement("div");
divs.textContent = "文本信息";
return divs;
}
8.mode模式
mode: 'production' //生产模式
mode: 'development'//开发模式
9.快捷配置,在package.json文件中配置
"scripts": {
"build":"webpack",
"start":"webpack"
}
改变运行方案
npm run build //运行生产环境并打包
npm start //运行开发环境
10.错误调试信息
生成错误信息文件 , 配置webpack.config.js文件 , 添加
devtool:提示方式
常用的提示方式有eval,source-map , hidden-source-map , inline-source-map , eval-source-map , cheap-source-map , cheap-module-source-map等
不同的错误提示方式的运行速度不同 , 适用场景也不同
11.webpack服务器
1.全局安装
npm install -g webpack-dev-server
2.项目依赖安装
npm install -D webpack-dev-server
3.运行webpack服务器
webpack-dev-server
4.快捷执行方案
"scripts": {
"build": "webpack",
"start": "webpack-dev-server"
}
5.修改服务器配置
配置文件中配置:
devServer:{
contentBase: path.join(__dirname, "dist"),
host: "0.0.0.0",
port: 8081
}
命令行配置:
webpack-dev-server --progress
12.Loaders
1.ES6 转 ES5
1.安装:
npm install --save-dev babel-loader @babel/core @babel/preset-env
2.增加配置
{
test:/.js$/,
exclude:/node_modules/,
loader:"babel-loader"
}
3.增加一个配置文件.babelrc
{
"presets": [
"@babel/preset-env"
]
}
4.编码操作
app.js:
import * as Ele from "./demo"
document.getElementsByTagName("body")[0].appendChild(Ele.demo());
demo.js:
export function demo(){
var divs = document.createElement("div");
divs.textContent = "文本信息!!!";
return divs;
}
5.参考地址:https://babeljs.io/setup#installation
2.React环境构建
1.安装:
npm install --save-dev @babel/preset-react
npm install --save react react-dom
2.修改.babelrc配置文件
{
"presets": [
"@babel/preset-env",
"@babel/preset-react"
]
}
3.修改配置文件webpack.config.js
由于React的后缀名可以是js也可以是jsx
{
test:/.(js|jsx)$/,
exclude:/node_modules/,
loader:"babel-loader"
}
4.编写React代码了:( VSCode great Icons)
app.js:
import React from "react"
import ReactDOM from "react-dom"
class Hello extends React.Component{
render(){
return (
<div>
Hello
</div>
)
}
}
ReactDOM.render(<Hello />,document.getElementById("root"));
PS:如果要修改后缀名,记得修改:entry:"./src/app.jsx"
5.关于安装依赖
--save-dev(-D):项目依赖,是不存在外部引用关系
--save(-S):项目依赖,存在CDN
6.引入css文件
1.安装依赖:
npm install -D css-loader style-loader
2.增加配置webpack.config.js
{
test:/.css$/,
loader:"style-loader!css-loader"
}
3.运行:
npm start
7.引入图片
1.安装依赖:
npm install -D url-loader
2.增加配置webpack.config.js
{
test:/.(png|jpg|gif|jpeg|svg)$/,
loader:"url-loader"
}
3.修改代码
import Logo from "./images/logo.jpg"
<img src={ Logo } alt="404" />
4.运行:
npm start
8.编译Less
1.安装:
npm install --save-dev less less-loader
2.添加配置文件
{
test:/.less$/,
loader:"style-loader!css-loader!less-loader"
}
13.插件:plugin
webpack 有着丰富的插件接口(rich plugin interface)。webpack 自身的多数功能都使用这个插件接口。这个插件接口使 webpack 变得极其灵活。这里简单介绍两个常用插件:
1.HTML模板插件
1.安装:
npm install -D html-webpack-plugin
2.增加配置:
new htmlPlugin({
template:"./src/index.temp.html"
})
2.自动打开浏览器
1.安装:
npm install -D open-browser-webpack-plugin
2.增加配置:
new openBrowserPlugin({
url:"http://localhost:8080"
})