Webpack 4 安装与使用指南-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_42418169/article/details/115606814

webpack的作用

进行重新加载编译。实际就是将浏览器不认识的语法编译成浏览器认识的语法。比如less
编译成css，ES6 语法转成 ES5等等。
减少io请求。通常我们在请求后，会返回一个html到浏览器。这时，我们如果打开控制台，就会发现在html页面通过script,link等标签引用的静态资源，浏览器会再次发出请求去获取这些资源。但是webpack的打包，将所有的静态资源都合并好了，减少了io请求。

安装nrm，切换镜像

一.安装使用

1.安装node

因为webpack是基于node环境下运行的，所以我们首先要安装node
官网：https://nodejs.org/en/
安装完成后查看

node -v

2.安装

全局安装
为了方便使用，我们可以先安装一个全局的webpack，由于webpack4.0开始需要依赖webpack-cli，所以我们可以一起安装了，其中-D是全局安装的意思

npm install webpack webpack-cli -D

推荐局部安装

# 创建一个项目目录
mkdir webapp
# 初始化项目
npm init -y

然后我们会看到项目根目录下多了一个package.json文件，里面存储着我们项目所使用的各个包的版本

# 局部安装 webpack webpack-cli
npm install --save-dev webpack  
npm install --save-dev webpack-cli

然后webpack会安装到我们的项目根目录下，同时会多了一个package-lock.json文件

3.webpack的配置

由于webpack更新4.0后，很多要求的变严格了，如果你不配置的话，不但会影响打包速度，而已会不断的输出提示。
创建一个webpack.config.js

// path 模块解决项目路径问题
const path = require('path')
module.exports = {
    //打包模式，一定要配置，不然打包速度慢很多
    mode:'development',//开发模式
    // mode:'production',//生产模式

    //入口  
    entry: path.join(__dirname, './src/main.js'), // __dirname 是node的通用变量，代表当前项目路径
    output: {
    	// 配置打包后文件存放目录
        path: path.join(__dirname, './dist'),
        // 配置打包后文件的名称
        filename: 'bundle.js'
    },
    // 监听文件改动，自动打包
    watch: true,
}

4.使用

在配置了webpack.config.js文件的前提下，使用一下命令打包

注意：因为我们的webpack是局部安装的，我们无法在终端里直接使用

在这里插入图片描述
解决方案：我们可以通过配置package.json文件里面的scripts属性来添加我们的命令

例如：我们需要使用局部安装webpack命令，我们在package.json文件这样写：
在这里插入图片描述

我们在scripts如何配置命令的名称，我们就可以在终端使用如下命令运行：
例如我们配置"dev:webpack"，我们就直接使用下面的命令运行

npm run webpack

在这里插入图片描述

5.卸载

webpack4.x开始官方文档是说要安装cli

# 删除全局webpack-cli
npm uninstall -g webpack-cli
# 删除本地（局部）webpack-cli
npm uninstall webpack-cli

# 删除全局webpack
npm uninstall -g webpack
# 删除本地webpack
npm un webpack

二.安装依赖

就是npm-install --save 和npm install --save-dev的区别是什么

以npm安装msbuild为例：

npm install --save

会把msbuild包安装到node_modules目录中
会在package.json的dependencies属性下添加msbuild
之后运行npm install命令时，会自动安装msbuild到node_modules目录中（存疑）
之后运行npm install --production或者注明NODE_ENV变量值为production时，会自动安装msbuild到node_modules目录中（存疑）

npm install --save-dev

会把msbuild包安装到node_modules目录中
会在package.json的devDependencies属性下添加msbuild
之后运行npm install命令时，会自动安装msbuild到node_modules目录中（存疑）
之后运行npm install --production或者注明NODE_ENV变量值为production时，不会自动安装msbuild到node_modules目录中（存疑）

使用原则

运行时需要用到的包使用–save，否则使用–save-dev。

–save-dev 是你开发时候依赖的东西，–save 是你发布之后还依赖的东西。

比如，你写 ES6 代码，如果你想编译成 ES5 发布那么 babel 就是devDependencies。
如果你用了 jQuery，由于发布之后还是依赖jQuery，所以是dependencies。

卸载依赖（本地）

npm install dependence_name--save-dev
npm install dependence_name-dev

卸载依赖（全局）

npm install -global dependence_name

三.安装plugin

通过npm安装相关插件，我们以html-webpack-plugin为例

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

在webpack.config.js中导入
你必须在 webpack 配置中，向 plugins 属性传入一个 new 实例。
取决于你的 webpack 用法，对应有多种使用插件的方式。

四.loader

1.loader的作用

loader 用于对模块的源代码进行转换。loader 可以使你在 import 或 “load(加载)” 模块时预处理文件。例如：使用import导入css模块

2.为什么需要loader

因为，webpack只能对js后缀的文件进行直接打包，其余的资源文件不能直接打包，这个时候我们就需要引入第三方loader来打包编译其他的资源，例如：css，less，TypeScript

3.module.rules配置

module.rules 允许你在 webpack 配置中指定多个 loader。 这种方式是展示 loader 的一种简明方式，并且有助于使代码变得简洁和易于维护。同时让你对各个 loader 有个全局概览：

loader 从右到左（或从下到上）地取值(evaluate)/执行(execute)。 在下面的示例中，从 sass-loader 开始执行，然后继续执行 css-loader，最后以 style-loader 为结束

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,  // 匹配所有的.css后缀的文件
        use: [
          // [style-loader](/loaders/style-loader)
          { loader: 'style-loader' },
          // [css-loader](/loaders/css-loader)
          {
            loader: 'css-loader',
            options: {
              modules: true
            }
          },
          // [sass-loader](/loaders/sass-loader)
          { loader: 'sass-loader' }
        ]
      }
    ]
  }
};
内联

4.使用loader告诉webpack加载css文件（案例）

安装对应的loader

npm i style-loader css-loader -D

然后指示 webpack 对每个 .css 使用 css-loader，style-loader

module.exports = {
    .....
    module: {
        rules: [
            { test: /\.css$/, use: ['style-loader', 'css-loader'] }, // 先执行css-loader加载器，再执行style-loader加载器
        ]
    }
}

5.使用url-loader处理图片与字体资源

安装

// 因为url-loader依赖file-loader
npm install file-loader url-loader -D

配置规则

module.exports = {
  	......
    module: {
        rules: [
            { test: /\.css$/, use: ['style-loader', 'css-loader'] },
            { test: /\.(jpg|png|gif|jpeg)$/, use: ['url-loader'] } ,// 使用url-loader
            { test: /\.(eot|svg|ttf|woff|woff2)$/, use: ['url-loader'] }
        ]
    }
}

设置文件大小限制，每三位要加“,” 例如：千位limit=51,200

// 限制图片转换的大小，51200B代表文件小于50KB就不转换，（文件太小了转换没必要）
// 由于文件太小，文件不会被转换成base64，只是会重命名
{ test: /\.(jpg|png|gif|jpeg)$/, use: ['url-loader?limit=51,200'] }

案例

在这里插入图片描述

文件重命名问题

url较大的资源，url-loader会进行base64转化，较小的文件会帮助我们重命名，所以我们不需要担心文件名称引用冲突

但有的时候我们不需要系统给我们的文件重命名，但是又担心文件引用冲突问题怎么办呢？

文件引用冲突问题：webpack会将资源打包，所有的图片资源都会发布到同一目录下，例如：我们在项目有两个不同的文件夹里面有每个文件夹里面都有一个同名的文件，假如我们给url-loader设置了不重命名参数[name].[ext]，那么打包后的文件都会以原来的名称放到同一个目录，想想：同一个文件夹有两个相同的名称的文件，可行吗？

在这里插入图片描述

文件重命名问题的解决方案

答案：在文件名前加hash值

// url-loader发布文件，小于limit设置的，会自动帮助我们重名名文件，是为了防止文件重名
// 但有的时候，我们不需要重命名文件，那怎么样才能防止文件，引用错误呢 答案：在文件名前加hash值
// name=[hash:8]-[name].[ext]代表不重名文件，但在文件名前加8位的hash
{ test: /\.(jpg|png|gif|jpeg)$/, use: ['url-loader?limit=51,200&name=[hash:8]-[name].[ext]'] },