webpack 安装配置指令

进行重新加载编译。实际就是将浏览器不认识的语法编译成浏览器认识的语法。比如 less 编译成 css，ES6 语法转成 ES5 等等。

减少 io 请求，通常我们在请求后，会返回一个 html 到浏览器。这时，我们如果打开控制台，就会发现在 html 页面通过 script,link 等标签引用的静态资源，浏览器会再次发出请求去获取这些资源。但是 webpack 的打包，将所有的静态资源都合并好了，减少了 io 请求。

# 安装webpack
npm install --save-dev webpack

# 安装webpack-cli依赖
npm install --save-dev webpack-cli

# 创建新项目
mkdir demo

# cd项目
cd demo

# 初始化
npm init -y

# 安装开发版本cli
npm install webpack webpack-cli --save-dev

新建一个 html 文件和一个 js 文件，工程目录如下

  demo
  |- package.json
+ |- index.html
+ |- /src
+   |- index.js

src/index.js:

function component() {
  var element = document.createElement('div');

  // Lodash（目前通过一个 script 脚本引入）对于执行这一行是必需的
  element.innerHTML = _.join(['Hello', 'webpack'], ' ');

  return element;
}

document.body.appendChild(component());

index.html:

<!doctype html>
<html>
  <head>
    <title>起步</title>
    <script src="https://unpkg.com/[email protected]"></script>
  </head>
  <body>
    <script src="./src/index.js"></script>
  </body>
</html>

在 package.json 中：

删除"main": "index.js",添加"private": true

调整工程目录：

  demo
  |- package.json
+ |- /dist
+   |- index.html
- |- index.html
  |- /src
    |- index.js

要在index.js中打包lodash依赖，我们需要在本地安装 library，终端输入指令：

npm install --save lodash

然后调整index.js内容

// 添加一行代码
import _ from 'lodash';

在dist/index.html中可以把引入的外部文件lodash删去

删去<script src="./src/index.js"></script>

添加<script src="main.js"></script>

执行终端：

npx webpack

即可在dist中打包生成需要的main.js文件

还可以手动配置文件，在根目录下新建一个webpack.config.js文件

const path = require('path');

module.exports = {
  // 这里放着需要打包的文件，如果多个文件，用数组形式写
  entry: './src/index.js',
  output: {
    // 这里是打包生成的文件名，还可以手动修改
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};

考虑到用 CLI 这种方式来运行本地的 webpack 不是特别方便，我们可以设置一个快捷方式，

在package.json中的"scripts"新增

"build": "webpack"

这样就可以使用npm run build指令代替之前的npx了

把之前dist文件夹里面的js文件删去，然后重新打包

npm run build

看一下工程目录

demo
|- package.json
|- webpack.config.js
|- /dist
  |- bundle.js
  |- index.html
|- /src
  |- index.js
|- /node_modules

没问题，成功打包，浏览器也正常显示

在 js 文件中import了一个 css 文件，需要在配置中安装并添加style-loaader和css-loader

npm install --save-dev style-loader css-loader

webpack.config.js:

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },

  // 添加的内容
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      }
    ]
  }
};

然后在 js 模块中：

import './style.css'

npm run build就可以自动解析打包啦

加载图片

下载安装file-loader

npm install --save-dev file-loader

webpack.config.js:

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

加载字体

webpack 加载字体资源

记载数据资源

此外，可加载的有用资源还有数据，json文件，CSV，TSV，XML等，实际上，json是内置的，可以直接import data from './data.json'引入

但是CSV，TSV，XML不可以，需要配置一下依赖

终端下载安装：

npm install --save-dev csv-loader xml-loader

webpack.config.js:

{
  test: /\.(csv|tsv)$/,
  use: [
    'csv-loader'
  ]
},
{
  test: /\.xml$/,
  use: [
    'xml-loader'
  ]
}

在src目录下添加一个 json 文件data.json

然后在index.js中引入：

import data from './data.json'