markdown 的WebPack
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了markdown 的WebPack相关的知识，希望对你有一定的参考价值。
### `webpack`介绍
1. `webpack`是一个`javascript`静态模块打包器（`module bundle`）
当`webpack`处理应用程序时，会递归的构建一个依赖关系图，其中包含应用程序所需要的每个模块，然后将这些模块打包成一个或多个`bundle`
2. 四个核心概念: `entry、output、loader、plugins`
3. `entry`是`webpack`打包模块的入口，作为构建依赖关系图的开始，从而找到与入口直接或间接依赖的模块。
可以指定一个 或 多个入口
`webpack.config.js`
```
// 指定一个入口
module.exports = {
entry: './src/index.js'
};
// 指定多个入口
module.exports = {
entry: {
index: './src/index.js',
app: './src/app.jsx'
}
}
```
4. `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`表示当前文件所在的绝对路径
5. `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`进行转换。
6. `plugins`插件可执行打包优化和压缩、重新定义环境中的变量。可以用来处理各种任务。
使用方法：`require()`插件，然后插入到`plugins`数组中。也可以在一个配置文件中因为不同目的而多次使用同一个插件，就需要使用`new`操作符来创建一个实例。
### `webpack`使用
1. 新建空文件夹 `base`
2. 命令行到该文件夹下
```
cd Desktop/project/base
```
3. 创建npm说明文件
```
npm init
```
4. 安装webpack到项目开发依赖中
```
npm install --save-dev webpack
```
5. 创建空文件夹src存放写入的代码，public存放浏览器读取的文件（webpack打包生成的js文件以）
```
mkdir public
mkdir src
```
6. 在src文件夹下添加主入口文件`index.js`
```
console.log(1111);
```
7. 配置文件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',
}
}
```
8. 启动webpack进行打包
- 非全局安装webpack需要在命令行输入
```
node_modules/.bin/webpack
```
- 在package.json的script中添加命令,然后在命令行中输入`npm start`
```
"scripts": {
"start": "webpack"
},
```
9. 打包后的文件进行调试source map
```
module.exports = {
devtool: 'eval-source-map',
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].bundle.js',
}
}
```
10. 本地浏览器监听代码修改，自动刷新修改后的结果。
- 命令行中输入：
```
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`
1. 为了使用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/
}
]
}
}
```
2. 安装react和react-dom
```
npm install -S react react-dom
```
3. 修改主入口文件
- 将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
```
4. `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`处理
1. `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'));
```以上是关于markdown 的WebPack的主要内容，如果未能解决你的问题，请参考以下文章