Webpack的使用

简介
- Webpack是一个其那段资源加载/打包工具，它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源
作用
- 可以将多种静态资源js、css、less转换成一个静态文件，减少了页面的请求

使用方式

全局安装Webpack（尽量在项目目录中执行cmd命令）
```
npm install -g webpack webpack-cli
```
在项目目录的js目录中创建几个js文件（之间的关联任意）。例如common.js、index.js、about.js、main.js(入口js文件)等等

打包（只打包js文件）

在项目根目录中创建配置文件webpack.config.js（文件名最好固定，内容结构固定）

// Node.js内置模块
const path = require("path");
module.exports = {
  // 配置入口文件
  entry: "./src/assets/js/main.js",
  output: {
    // 输出路径，__dirname：当前文件所在路径，最好事先创建好
    path: path.resolve(__dirname, "./dist"),
    // 输出文件
    filename: "bundle.js"
  }
}

命令行执行编译命令

cmd窗口执行

webpack   # 这个会有警告信息
或者
webpack --mode=development    # 这个没有警告信息

完成js文件的打包

同样在项目目录的css目录中创建几个css文件，然后在main.js(入口js文件)引入css文件

安装css加载工具

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

上面的webpack.config.js配置文件中添加内容（和output键同级）

module: {
  rules: [
    {
      // 打包规则应用到以css结尾的文件上
      test: /\.css$/,
      use: ['style-loader', 'css-loader']
    }
  ]
}

打包执行同样的命令即可

网站题目：Webpack的使用
网页链接：https://www.cdcxhl.com/article48/dschghp.html

成都网站建设公司_创新互联，为您提供外贸建站、网站制作、网站策划、定制网站、虚拟主机、外贸网站建设

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容