webpack介绍
-
webpack是一个javascript静态模块打包器（module bundle）
当webpack处理应用程序时，会递归的构建一个依赖关系图，其中包含应用程序所需要的每个模块，然后将这些模块打包成一个或多个bundle
- 四个核心概念:
entry、output、loader、plugins
-
entry是webpack打包模块的入口，作为构建依赖关系图的开始，从而找到与入口直接或间接依赖的模块。
可以指定一个 或 多个入口
webpack.config.js
// 指定一个入口
module.exports = {
entry: './src/index.js'
};
// 指定多个入口
module.exports = {
entry: {
index: './src/index.js',
app: './src/app.jsx'
}
}
-
output是webpack打包输出的位置及命名，默认为./dist。
webpack.config.js
const path = require('path');
module.exports = {
entry: {
index: './src/index.js',
app: './src/app.jsx'
}
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].bundle.js',
}
}
其中导入path模块是从node.js导入的，主要用来控制生成文件的目录。
The path.resolve()method resolves a sequence of paths or path segmentds into an absolute path
path.resolve(_dirname, 'dist')将参数中的路径、路径片段解析成一个绝对地址。
_dirname表示当前文件所在的绝对路径
-
loader是为了让webpack处理非javascript文件。webpack本身只理解javascript。
webpack loader将所有类型的文件，转换为关系依赖图可以直接引用的模块。
webpack.config.js
const path = require('path');
module.exports = {
entry: {
index: './src/index.js',
app: './src/app.jsx'
}
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].bundle.js',
},
module: {
rules: [
{ test: /\.txt$/, use: 'raw-loader'}
]
}
}
在module.rules中包含test和use属性,意味着，当webpack遇到[require()/import语句中被解析为.txt的路径]时，先使用raw-loader进行转换。
-
plugins插件可执行打包优化和压缩、重新定义环境中的变量。可以用来处理各种任务。
使用方法：require()插件，然后插入到plugins数组中。也可以在一个配置文件中因为不同目的而多次使用同一个插件，就需要使用new操作符来创建一个实例。
webpack使用
- 新建空文件夹
base
- 命令行到该文件夹下
cd Desktop/project/base
- 创建npm说明文件
npm init
- 安装webpack到项目开发依赖中
npm install --save-dev webpack
- 创建空文件夹src存放写入的代码，public存放浏览器读取的文件（webpack打包生成的js文件以）
mkdir public
mkdir src
- 在src文件夹下添加主入口文件
index.js
console.log(1111);
- 配置文件webpakc.config.js
在base根目录下新建webpakc.config.js文件
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].bundle.js',
}
}
- 启动webpack进行打包
- 非全局安装webpack需要在命令行输入
node_modules/.bin/webpack
- 在package.json的script中添加命令,然后在命令行中输入
npm start
"scripts": {
"start": "webpack"
},
- 打包后的文件进行调试source map
module.exports = {
devtool: 'eval-source-map',
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].bundle.js',
}
}
- 本地浏览器监听代码修改，自动刷新修改后的结果。
- 命令行中输入：
npm install -D webpack-dev-server
- webpack.config.js中配置
module.exports = {
devtool: 'eval-source-map',
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].bundle.js',
},
devServer: {
contentBase: './dist'
}
}
| devServer的配置选项 | 描述 |
|---|---|
| contentBase | 本地服务器加载的页面所在的目录 |
| port | 设置监听端口，默认为'8080' |
| inline | 设置为true,当源文件改变时，会自动刷新页面 |
- 在
package.json中添加命令，用来开启服务器
"scripts": {
"start": "webpack",
"server": "webpack-dev-server --open"
},
三、使用react
- 为了使用ES6 和JSX语法，需要安装
babel
- 命令行中输入
npm install --save-dev babel-core babel-loader babel-preset-env babel-preset-react
- 在
webpack中配置babel
module.exports = {
...
module: {
rules: [
{
test: /(\.jsx|\.js)$/,
use: {
loader: "babel-loader",
options: {
presets: [
"env", "react"
]
}
},
exclude: /node_modules/
}
]
}
}
- 安装react和react-dom
npm install -S react react-dom
- 修改主入口文件
- 将src下的
index.js重命名为index.jsx，在src下新建文件夹component,在该component文件夹下新建Hello.jsx
index.jsx
import React from 'react';
import ReactDom from 'react-dom';
import Hello from './component/Hello';
ReactDom.render(<Hello />, document.querySelector('.App'));
Hello.jsx
import React, { Component } from 'react'
export default class Hello extends Component {
render() {
return (
<h1>
hello
</h1>
)
}
}
- webpack配置修改,添加
resolve,是为了让用户在引入模块时，不带扩展
module.exports = {
...
resolve: {
extensions: ['*', '.js', '.jsx']
},
module: {
rules: [
{
test: /(\.jsx|\.js)$/,
use: {
loader: "babel-loader",
options: {
presets: [
"env", "react"
]
}
},
exclude: /node_modules/
}
]
}
}
- 在dist 文件夹下新建index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<meta http-equiv="x-ua-compatible" content="IE=edge,chrome=1"/>
<title>React Redux demo</title>
</head>
<body>
<div class="App"></div>
<script src="main.bundle.js"></script>
</body>
</html>
- 在命令行中输入
npm run start
npm run server
-
Babel配置
babel有很多配置项，可以单独拿出来，放在.babelrc文件中。webpack会自动调用.babelrc中的选项。
webpack.config.js
module.exports = {
...
module: {
rules: [
{
test: /(\.jsx|\.js)$/,
use: {
loader: "babel-loader",
},
exclude: /node_modules/
}
]
}
}
在根目录文件夹下新建.babelrc文件， 文件内容如下
{
"presets": ["react", "env"]
}
CSS处理
-
css-loader是为了能处理@import、url(...)，会先import/require()后，再解析他们。
style-loader是将所有计算后的样式加入页面，二者组合将样式表嵌入到webpack打包后的JS文件中。
命令行输入
npm install -D style-loader css-loader
在webpack.config.js文件中进行配置
module.exports = {
...
module: {
rules: [
{
test: /(\.jsx|\.js)$/,
use: {
loader: "babel-loader",
},
exclude: /node_modules/
},
{
test: /\.css$/,
loaders: ['style-loader', 'css-loader'],
}
]
}
}
在src目录下新建style.css
h1 {
color: red;
}
在src/index.jsx文件中引入css
...
import "./style.css";
ReactDom.render(<Hello />, document.querySelector('.App'));
