webpack3快速入门教程

最新推荐文章于 2022-02-21 21:51:17 发布

慧智慧心

最新推荐文章于 2022-02-21 21:51:17 发布

阅读量169

点赞数

本文链接：https://blog.youkuaiyun.com/qq_39857916/article/details/103688361

版权

webpack快速入门教程

###1、了解Webpack相关
* 什么是webpack
* Webpack是一个模块打包器(bundler)。
* 在Webpack看来, 前端的所有资源文件(js/json/css/img/less/…)都会作为模块处理
* 它将根据模块的依赖关系进行静态分析，生成对应的静态资源
* 理解Loader
* Webpack 本身只能加载JS/JSON模块，如果要加载其他类型的文件(模块)，就需要使用对应的loader 进行转换/加载
* Loader 本身也是运行在 node.js 环境中的 JavaScript 模块
* 它本身是一个函数，接受源文件作为参数，返回转换的结果
* loader 一般以 xxx-loader 的方式命名，xxx 代表了这个 loader 要做的转换功能，比如 json-loader。
* 配置文件(默认)
* webpack.config.js : 是一个node模块，返回一个 json 格式的配置信息对象
* 插件
* 插件件可以完成一些loader不能完成的功能。
* 插件的使用一般是在 webpack 的配置信息 plugins 选项中指定。
* CleanWebpackPlugin: 自动清除指定文件夹资源
* HtmlWebpackPlugin: 自动生成HTML文件并
* UglifyJSPlugin: 压缩js文件

###2、学习文档 :

webpack官网: http://webpack.github.io/
webpack3文档(英文): https://webpack.js.org/
webpack3文档(中文): https://doc.webpack-china.org/
###3、开启项目

初始化项目：

生成package.json文件

{
  "name": "webpack_test",
  "version": "1.0.0"
}

安装webpack
- npm install webpack -g //全局安装
- npm install webpack --save-dev //局部安装
  ###4、编译打包应用
创建入口src/js/ : entry.js
- document.write(“entry.js is work”);
创建主页面: dist/index.html
编译js
- webpack src/js/entry.js dist/bundle.js

查看页面效果
###5、添加js/json文件

创建第二个js: src/js/math.js

export function square(x) {
  return x * x;
}

export function cube(x) {
  return x * x * x;
}

创建json文件: src/json/data.json
```
{
  "name": "Tom",
  "age": 12
}
```

更新入口js : entry.js

import {cube} from './math'
import data from '../json/data.json'
//注意data会自动被转换为原生的js对象或者数组
document.write("entry.js is work <br/>");
document.write(cube(2) + '<br/>');
document.write(JSON.stringify(data) + '<br/>')

编译js:
```
webpack src/js/entry.js dist/bundle.js
```
查看页面效果
###6、使用webpack配置文件

创建webpack.config.js

const path = require('path'); //path内置的模块，用来设置路径。

module.exports = {
  entry: './src/js/entry.js',   // 入口文件
  output: {                     // 输出配置
    filename: 'bundle.js',      // 输出文件名
    path: path.resolve(__dirname, 'dist')   //输出文件路径配置
  }
};

配置npm命令: package.json
```
"scripts": {
  "build": "webpack"
},
```
打包应用
```
npm run build
```

###7、打包css和图片文件

安装样式的loader

```
npm install css-loader style-loader --save-dev
npm install file-loader url-loader --save-dev
补充：url-loader是对象file-loader的上层封装，使用时需配合file-loader使用。
```

配置loader

module: {
  rules: [
    {
      test: /\.css$/,
      use: [
        'style-loader',
        'css-loader'
      ]
    },
    {
      test: /\.(png|jpg|gif)$/,
      use: [
        {
          loader: 'url-loader',
          options: {
            limit: 8192      
          }
        }
      ]
    }
  ]
}

向应用中添加2张图片:
- 小图: img/logo.png
- 大图: img/big.jpg

创建样式文件: src/css/test.css

body {
  background: url('../img/logo.jpg')
}

更新入口js : entry.js
- import ‘…/css/test.css’

添加css样式

 #box1{
  width: 300px;
  height: 300px;
  background-image: url("../image/logo.jpg");
}
#box2{
  width: 300px;
  height: 300px;
  background-image: url("../image/big.jpg");
}

index.html添加元素

<div id="box1"></div>
<div id="box2"></div>

执行打包命令：
```
npm run build
```
发现问题：
- 大图无法打包到entry.js文件中，index.html不在生成资源目录下。
- 页面加载图片会在所在目录位置查找，导致页面加载图片时候大图路径无法找到
- 解决办法：
  - 使用publicPath : ‘dist/js/’ //设置为index.html提供资源的路径,设置完后找所有的资源都会去当前目录下找。
  - 将index.html放在dist/js/也可以解决。
    ###8、自动编译打包
- 利用webpack开发服务器工具: webpack-dev-server
- 下载
  - npm install --save-dev webpack-dev-server
- webpack配置
  devServer: {
  contentBase: ‘./dist’
  },
- package配置
  - “start”: “webpack-dev-server --open”
- 编译打包应用并运行
  - npm start
    ###9、使用webpack插件
常用的插件
- 使用html-webpack-plugin根据模板html生成引入script的页面
- 使用clean-webpack-plugin清除dist文件夹

下载

npm install --save-dev  html-webpack-plugin clean-webpack-plugin

webpack配置
```
const HtmlWebpackPlugin = require('html-webpack-plugin'); //自动生成html文件的插件
```
const CleanWebpackPlugin = require(‘clean-webpack-plugin’); //清除之前打包的文件
plugins: [
new HtmlWebpackPlugin({template: ‘./index.html’}),
new CleanWebpackPlugin([‘dist’]),
]

创建页面: index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>webpack test</title>
</head>
<body>
<div id="app"></div>
<!--打包文件将自动通过script标签注入到此处-->
</body>
</html>