webpack5（一）安装和初体验

安装

npm install webpack webpack-cli -g  // 全局安装
npm install webpack webpack-cli -D  // 局部开发依赖安装
复制代码

使用

• 默认入口
  src/index.js

• 输出
  dist/main.js

• 使用全局依赖打包

1. webpack

• 本地依赖打包

1. npx webpack
2. ./node_modules/.bin/webpack
3. npm run build #推荐

package.json

 "scripts": {
    "build": "webpack"
  }
复制代码

配置

方式
1.不使用配置文件
简单的配置通过cli参数方式配置，具体可查官网：API/命令行接口/用法

2.使用配置文件

• 根目录添加 webpack.config.js
• 指定文件为配置文件

package.json

"scripts": {
    "build": "webpack --config prod.config.js"
  }
复制代码

自定义出入口

const path = require('path')

module.exports = {
  entry: "./src/main.js",  // 指定入口
  output: {
    filename: 'build.js', // 文件名
    path: path.resolve(__dirname, 'build') // 输出目录 注意是绝对路径
  }
}
复制代码

loader

当我们加载css文件时，发现webpack打包时会报错，这个时候需要相应的loader进行解析处理

使用css-loader解析css
1.下载

npm install css-loader -D
复制代码

2.使用
webpack.config.js

module.exprts = {
  module: {
    // 模块配置
    rules: [
      // 规则 对模块(module)应用 loader，或者修改解析器(parser)
      {
        test: /\.css$/, // 正则匹配
        use: ['css-loader']
      }
    ]
  }
}
复制代码

再次打包发现没有了报错，但是样式还是没有生效。因为css-loader只是负责解析加载了css，没有插入到页面中。这个时候就需要再使用一个loader，style-loader

使用style-loader

1. 下载

npm install style-loader -D
复制代码

2. 使用

module.exports = {
  module: {
    // 模块配置
    rules: [
      // 规则 对模块(module)应用 loader，或者修改解析器(parser)
      {
        test: /\.css$/, // 正则匹配
        use: ['style-loader', 'css-loader'] // 官网：Loaders 可以通过传入多个 loaders 以达到链式调用的效果，它们会从右到左被应用（从最后到最先配置）
      }
    ]
  }
}
复制代码

这个时候就发现样式生效了
在实际开发中可能使用到了less、sass、styles，让webpack正确加载解析，只需要先下载对应loader，然后在配置文件中添加loader。
*注意配置顺序，例如解析less：[‘style-loader’, ‘css-loader’, ‘less-loader’]