webpack的基本使用

什么是webpack?

​ webpack是前端项目工程化的具体解决方案。

webpack的作用

​ 它提供了友好的前端模块化开发支持、以及代码压缩混淆、处理浏览器端JavaScript兼容性、性能优化等强大的功能。让我们的工作重心放到具体的功能实现上,提高了前端开发效率和项目的可维护性。

​ 目前vue,react等前端项目,基本上都是基于webpack进行工程化开发的。

1.安装webpack

npm install webpack@5.83.0 webpack-cli@4.10.0 -D

• -D是--save-dev的简写

2.配置webpack

(1)项目根目录中,创建名为webpack.config.js的webpack配置文件,并初始化基本配置如:

module.exports = {

    mode:'development'         
}

• mode用来指定构建模式。可选值有development和production

(2)在package.json的scripts节点下,新增dev脚本如:

"scripts": {
    "dev": "webpack"
  }

• scripts节点下的脚本,可通过npm run 执行

(3)启动webpack进行项目的打包构建

npm run dev

成功运行后根目录自动多出了dist->main.js, main.js是由webpack根据我们的index.js,给我们自动生成的我们将main.js引入到html页面替换我们原先自己的index.js即可。

3.webpack打包压缩

webpack.config.js->设置 mode: production

module.exports = {

    mode:'production'         
}

• 开发阶段用devolopment 打包快
• 上线阶段用procduction 体积小

run脚本的时候,先去package.json找到webpack命令,然后webpack去找到webpack.config.js配置文件然后再执行。

webpack中的默认约定

• 默认的打包入口文件为src->index.js
• 默认的输出文件路径为dist->main.js

可以在webpack.config.js中修改打包的默认约定:

	// entry: 指定要处理哪个文件
    entry: path.join(__dirname, './src/index.js'),     // 打包入口文件的路径
    // output: 指定生成的文件存放路径
    output: {
        path: path.join(__dirname, './dist'),           // 生成的文件 存放路径
        filename: './js/bundle.js'                      // 生成的文件 名称
    },

• 通过entry节点指定打包入口。通过output节点指定打包出口

4.webpack中的插件

(1)webpack-dev-server

​ 每当修改了源代码,webpack会自动进行项目的打包和构建。

安装

npm intall webpack-dev-server -D

配置

package.json->scripts->dev: serve 添加serve参数

"scripts": {
    "dev": "webpack serve",
  }

安装配置成功启动后发现并没有效果?

​ 因为webpack-dev-server会把生成的文件放在内存中,而不是物理磁盘。

​ 只需要在html文件中直接<script src "地址端口/文件">,访问的是内存地址即可。

<script src="http://localhost:8080/index.js"></script>

(2)html-webpack-plugin

​ 将作为模板的路径复制到根目录,放到了内存中,在生成的index.html页面中,自动注入打包的bundle.js文件,这样我们就不用在html中手动引入script标签了。

安装

npm intall html-webpack-plugin -D

配置

// 1.导入html插件,得到插件的构造函数
const HtmlPlugin = require('html-webpack-plugin')
// 2.new 构造函数,创建插件的实例对象
const htmlPlugin = new HtmlPlugin({
    template: './src/index.html',        
    filename: './index.html'            
})
module.exports = {
    // 3.插件的数组,将来webpack在运行时,会调用这些插件
    plugins: [htmlPlugin], 
    
    devServer: {
    // 手动打包成功后,自动打开浏览器
    open: true,
    // 实时打包时所使用的主机地址
    host: '127.0.0.1',
    // 实时打包时所使用的端口号
    port: 8080
    },
}

• template: 指定要复制哪个页面
• filename: 指定复制出来的文件名和存放路径
• devServer节点: 配置后,webpack打包成功后,会自动打开浏览器,不需要我们手动了

5.loader加载器

​ webpack默认只能打包处理.js结尾的文件。其他类型的文件需要调用loader加载器才可以正常打包。

​ loader加载器的作用: 协助webpack打包处理特定的文件模块。

(1)css-loader

​ 可以打包处理.css文件。

安装

npm install style-loader css-loader -D

配置

module:{
    // 定义规则
    rules:[
        // 处理css文件的loader
        {test:/\.css$/,use:['style-loader','css-loader']}
    ]
}

• 在webpack.config.js配置文件中,定义所有第三方文件模块的匹配规则
• test: 表示匹配的文件类型
• use: 表示要调用的loader
• use数组中指定的loader顺序是固定的,多个loader调用顺序是从后往前

​ 当webpack发现某个文件处理不了时,会查找webpack.config.js配置文件,看module.rules数组中,是否配置了对应的加载器。

webpack把index.css文件先转交给loader(css-loader)进行处理->css-loader处理完毕后->转交给style-loader处理->处理完后发现没有下一个loader,就把处理结果转交给webpack->
webpack把style-loader处理的结果,合并到/dist/bundle.js中

(2)less-loader

​ 可以打包处理.less文件。

安装

npm install less-loader less -D

配置

module:{
    // 定义规则
    rules:[
        // 处理less文件的loader
        {test:/\.less$/,use:['style-loader','css-loader','less-loader']
    ]
}

(3)url-loader

​ 可以打包处理图片相关路径。

安装

npm install url-loader file-loader -D

配置

module:{
    // 定义规则
    rules:[
        // 处理图片文件的loader
 		{ test: /\.jpg|png|gif$/, use: 'url-loader?limit=8' }
    ]
}

• ?之后是loader的参数项
• limit用来限定图片的大小,单位是字节(byte)
• 只有<=limit大小的图片,才会被转为base64格式的图片
• 使用base64字符串格式,在请求img标签时,就顺带把这个图片给请求下来了,不需要额外请求去拿图片下来
• base64的优点: 防止页面发起不必要的请求。性能优化

(4)babel-loader

​ 打包处理js文件中的高级语法。

安装

npm install babel-loader @babel/core @babel/plugin-proposal-decorators -D

配置

module:{
    // 定义规则
    rules:[
        // 处理js高级语法的loader
 		{ test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }
    ]
}

• webpack只能打包处理一部分高级的js语法。对于那些webpack无法处理的高级js语法,需要
  借助babel-loader进行打包处理。
• exclude: 指定排除项,因为node_modules目录下的第三方包不需要被打包

​ 项目根目录中,创建名为babel.config.js的配置文件,指定babel配置项:

module.exports = {

    plugins: [['@babel/plugin-proposal-decorators', { legacy: true }]]
}

Babel官网: https://babeljs.io/docs/en/babel-plugin-proposal-decorators

(5)clean-webpack-plugin

​ webpack每次发布时,自动删除掉dist文件夹。

安装

npm install clean-webpack-plugin -D

配置

// 1.导入自动清除dist文件夹的插件
const { CleanWebpackPlugin }=require('clean-webpack-plugin')
// 2.
module.exports = {
    plugins: [new CleanWebpackPlugin()]
}

6.配置打包发布

(1)package.json->scripts节点下->新增build

  "scripts": {
    "dev": "webpack serve",
    "build": "webpack --mode production"
  },

• --mode指定的参数项,会覆盖webpack.config.js中的mode选项。

前端打包得到dist文件发给后端进行项目的上线。开发时生成的文件在内存(serve参数),发布时文件文件在物理磁盘。

7.优化图片和js的文件的存放路径

​ js的文件统一到js目录中,图片的文件统一放到images目录中。

(1)配置js的路径

webpack.config.js中output设置为:

filename: './js/bundle.js'

(2)配置图片的路径

webpack.config.js->loader配置项中设置:

{ test: /\.jpg|png|gif$/, use: 'url-loader?limit=8&outputPath=images' }

• &的方式添加outputPath参数

8.Source Map

​ Source Map就是一个信息文件,存储着位置信息。

​ 开发环境下默认生成的Source Map,记录的是生成后的代码的位置。导致运行时报错的代码行号与源代码的行号不一致。有了Source Map当调试代码时出错后,能精准定位到我们源代码的位置。

配置Source Map

// 开发模式
devtool: 'eval-source-map'

• 开发模式下建议把devtool的值设置为eval-source-map ,可以精准定位到具体的错误行

// 发布模式
devtool: 'nosources-source-map'

• 发布模式下建议关闭Source Map或者将devtool的值设置为 nosources-source-map(显示行号,但不显示源码),
• 这样可以防止源码泄漏,提高了安全性。

9.设置src为源目录

resolve: {

        alias: {
            '@': path.join(__dirname, './src/')
        }
}

• 建议使用@表示src源码目录,从外往里找其他文件;不要使用../../从里往外找了
• 告诉webpack,@符号表示src这一层目录

webpack.config.js配置文件:

package.json配置文件