webpack安装配置指令

2022-06-09 14:00:37 浏览数 (1)

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

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

代码语言：javascript复制
# 安装webpack
npm install --save-dev webpack
代码语言：javascript复制
# 安装webpack-cli依赖
npm install --save-dev webpack-cli
代码语言：javascript复制
# 创建新项目
mkdir demo
代码语言：javascript复制
# cd项目
cd demo
代码语言：javascript复制
# 初始化
npm init -y
代码语言：javascript复制
# 安装开发版本cli
npm install webpack webpack-cli --save-dev

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

代码语言：javascript复制
  demo
  |- package.json
  |- index.html
  |- /src
    |- index.js

src/index.js:

代码语言：javascript复制
function component() {
  var element = document.createElement('div');

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

  return element;
}

document.body.appendChild(component());

index.html:

代码语言：javascript复制
<!doctype html>
<html>
  <head>
    <title>起步</title>
    <script src="https://unpkg.com/lodash@4.16.6"></script>
  </head>
  <body>
    <script src="./src/index.js"></script>
  </body>
</html>

在package.json中：

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

调整工程目录：

代码语言：javascript复制
  demo
  |- package.json
  |- /dist
    |- index.html
- |- index.html
  |- /src
    |- index.js

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

代码语言：javascript复制
npm install --save lodash

然后调整index.js内容

代码语言：javascript复制
// 添加一行代码
import _ from 'lodash';

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

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

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

执行终端：

代码语言：javascript复制
npx webpack

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

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

代码语言：javascript复制
const path = require('path');

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

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

在package.json中的"scripts"新增

代码语言：javascript复制
"build": "webpack"

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

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

代码语言：javascript复制
npm run build

看一下工程目录

代码语言：javascript复制
demo
|- package.json
|- webpack.config.js
|- /dist
  |- bundle.js
  |- index.html
|- /src
  |- index.js
|- /node_modules

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

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

代码语言：javascript复制
npm install --save-dev style-loader css-loader

webpack.config.js:

代码语言：javascript复制
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模块中：

代码语言：javascript复制
import './style.css'

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

加载图片

下载安装file-loader

代码语言：javascript复制
npm install --save-dev file-loader

webpack.config.js:

代码语言：javascript复制
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不可以，需要配置一下依赖

终端下载安装：

代码语言：javascript复制
npm install --save-dev csv-loader xml-loader

webpack.config.js:

代码语言：javascript复制
{
  test: /.(csv|tsv)$/,
  use: [
    'csv-loader'
  ]
},
{
  test: /.xml$/,
  use: [
    'xml-loader'
  ]
}

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

然后在index.js中引入：

代码语言：javascript复制
import data from './data.json'
webpack 打包 javascript json css

0 人点赞