mirror of
https://github.com/qianguyihao/Web.git
synced 2024-10-30 04:24:44 +08:00
275 lines
3.9 KiB
Markdown
275 lines
3.9 KiB
Markdown
|
|
|||
|
|
|||
|
## 前言
|
|||
|
|
|||
|
Webpack所执行的环境是Node环境。
|
|||
|
|
|||
|
|
|||
|
## 项目准备
|
|||
|
|
|||
|
(1)创建目录:
|
|||
|
|
|||
|
|
|||
|
```
|
|||
|
mkdir WebpackTest
|
|||
|
```
|
|||
|
|
|||
|
PS:文件夹的名字不要起关键字`webpack`,避免冲突。
|
|||
|
|
|||
|
|
|||
|
|
|||
|
|
|||
|
(2)初始化空的目录:
|
|||
|
|
|||
|
```
|
|||
|
npm init
|
|||
|
```
|
|||
|
|
|||
|
输入上述命令后,根据提示输入 project name(**要求小写**),其他的采用默认即可,一路回车,最后输入`y`表示yes。
|
|||
|
|
|||
|
这个命令的作用是创建一个初始化的文件`package.json`。如下图所示:
|
|||
|
|
|||
|
|
|||
|
接下来,npm才能正常地安装各种 package。
|
|||
|
|
|||
|
(3)创建业务目录:
|
|||
|
|
|||
|
20180309_0928.png
|
|||
|
|
|||
|
|
|||
|
|
|||
|
## 文件配置
|
|||
|
|
|||
|
### 创建配置文件 webpack.config.js
|
|||
|
|
|||
|
`webpack.config.js`是Webpack所需要的配置文件,我们直接在项目的根目录中新建这个文件即可。
|
|||
|
|
|||
|
接下来,我们需要对这个文件进行配置。包括如下部分:
|
|||
|
|
|||
|
|
|||
|
**基础配置**:(也是webpack必须有的配置)
|
|||
|
|
|||
|
- entry:入口。表示webpack要构建哪个文件。
|
|||
|
|
|||
|
- module:配置各种loader。
|
|||
|
|
|||
|
- plugins:所依赖的插件
|
|||
|
|
|||
|
- output:构建成功后,输出的位置。
|
|||
|
|
|||
|
**进阶配置**:
|
|||
|
|
|||
|
- `resolve`
|
|||
|
|
|||
|
- `devtool`
|
|||
|
|
|||
|
- `devServer`
|
|||
|
|
|||
|
上面的内容,我们详细来介绍。
|
|||
|
|
|||
|
|
|||
|
### 基础配置
|
|||
|
|
|||
|
我们在`webpack.config.js`文件里可以这样写:
|
|||
|
|
|||
|
```javascript
|
|||
|
const path = require('path');
|
|||
|
|
|||
|
module.exports = {
|
|||
|
entry: {
|
|||
|
app: '.app/js/main.js' //webpack从这个文件作为入口,进行构建
|
|||
|
},
|
|||
|
module: {
|
|||
|
loaders: [{ //告诉webpack,什么样的文件就用什么解析器
|
|||
|
test: /\.html$/, //这里用到了正则
|
|||
|
loaders: `html-loader` //所有的loaders都要单独安装。稍后再说
|
|||
|
},{
|
|||
|
test: /\.vue$/,
|
|||
|
loaders: `vue-loader`
|
|||
|
},{
|
|||
|
test: /\.scss/,
|
|||
|
//【注意】webpack支持多个loader的串行解析,解析顺序**从右向左**。
|
|||
|
//这里的解析顺序是:遇到sass文件时,先用sass loader进行处理;处理结束后,交给css loader;css loader处理结束后交给 style loader
|
|||
|
loaders: `style-loader!css-loader!sass-loader`
|
|||
|
}]
|
|||
|
},
|
|||
|
plugins: [],
|
|||
|
output: {
|
|||
|
filename: '[name].min.js', //这里的`[name]`是变量,不要乱写,它是和上面的 entry 里面的 app 对应起来的。
|
|||
|
path: path.resolve(__dirname, './dist') //值里面的`path`就是第一行里通过Node.js的方式引入的path。`__dirname`是环境变量,代表当前路径。
|
|||
|
}
|
|||
|
}
|
|||
|
|
|||
|
|
|||
|
```
|
|||
|
|
|||
|
注意上方代码的注释,写得很详细。尤其注意scss文件的解析方式。
|
|||
|
|
|||
|
光这样写还不够,我们还要安装`module`部分所列出的各种loader:
|
|||
|
|
|||
|
```bash
|
|||
|
# D 表示开发依赖
|
|||
|
npm i html-loader D
|
|||
|
|
|||
|
# 一次性安装各种loader
|
|||
|
npm i vue-loader style-loader css-loader sass-loader -D
|
|||
|
```
|
|||
|
|
|||
|
|
|||
|
### 进阶配置
|
|||
|
|
|||
|
|
|||
|
**1、devServer:**
|
|||
|
|
|||
|
我们在本地开发时,常常需要启动一个服务,这样的话,我们不再使用file协议,而是使用http协议。这里就需要用到配置文件里的`devServer`参数。
|
|||
|
|
|||
|
我们先打开Webpack的官方文档里关于**[devServer](https://doc.webpack-china.org/configuration/dev-server/#devserver)**的部分。摘取下面的代码,直接copy到`webpack.config.js`文件里,位置和`module`并列:
|
|||
|
|
|||
|
```javascript
|
|||
|
devServer: {
|
|||
|
contentBase: path.join(__dirname, "dist"),
|
|||
|
compress: true,
|
|||
|
port: 9000
|
|||
|
}
|
|||
|
```
|
|||
|
|
|||
|
参数解释:
|
|||
|
|
|||
|
- `contentBase`:如果你需要提供一个静态文件,这里就配置静态文件的输出路径。
|
|||
|
|
|||
|
- `compress`:表示整个服务要开启gzip压缩。
|
|||
|
|
|||
|
- `port`:服务占用的端口。
|
|||
|
|
|||
|
|
|||
|
然后,如下如下命令,安装`[webpack-dev-server](https://doc.webpack-china.org/guides/development/#%E4%BD%BF%E7%94%A8-webpack-dev-server)`:
|
|||
|
|
|||
|
```
|
|||
|
npm install --save-dev webpack-dev-server
|
|||
|
```
|
|||
|
|
|||
|
|
|||
|
|
|||
|
### 其他
|
|||
|
|
|||
|
构建工具还可以帮我们把px转成rem。
|
|||
|
|
|||
|
|
|||
|
|
|||
|
|
|||
|
|
|||
|
|
|||
|
|
|||
|
|
|||
|
|
|||
|
|
|||
|
|
|||
|
|
|||
|
|
|||
|
```
|
|||
|
|
|||
|
```
|
|||
|
|
|||
|
|
|||
|
|
|||
|
|
|||
|
|
|||
|
|
|||
|
|
|||
|
|
|||
|
|
|||
|
|
|||
|
|
|||
|
```
|
|||
|
|
|||
|
```
|
|||
|
|
|||
|
|
|||
|
|
|||
|
|
|||
|
|
|||
|
|
|||
|
|
|||
|
|
|||
|
|
|||
|
|
|||
|
|
|||
|
```
|
|||
|
|
|||
|
```
|
|||
|
|
|||
|
|
|||
|
|
|||
|
|
|||
|
|
|||
|
|
|||
|
|
|||
|
|
|||
|
|
|||
|
|
|||
|
|
|||
|
```
|
|||
|
|
|||
|
```
|
|||
|
|
|||
|
|
|||
|
|
|||
|
|
|||
|
|
|||
|
|
|||
|
|
|||
|
|
|||
|
|
|||
|
|
|||
|
|
|||
|
```
|
|||
|
|
|||
|
```
|
|||
|
|
|||
|
|
|||
|
|
|||
|
|
|||
|
|
|||
|
|
|||
|
|
|||
|
|
|||
|
|
|||
|
|
|||
|
|
|||
|
```
|
|||
|
|
|||
|
```
|
|||
|
|
|||
|
|
|||
|
|
|||
|
|
|||
|
|
|||
|
|
|||
|
|
|||
|
|
|||
|
|
|||
|
|
|||
|
|
|||
|
```
|
|||
|
|
|||
|
```
|
|||
|
|
|||
|
|
|||
|
|
|||
|
|
|||
|
|
|||
|
|
|||
|
|
|||
|
|
|||
|
|
|||
|
|
|||
|
|
|||
|
```
|
|||
|
|
|||
|
```
|
|||
|
|
|||
|
|
|||
|
|
|||
|
|
|||
|
|