webpack的使用,看这一篇就够了

目录

一、安装webpack

二、配置webpack

三、自定义打包的入口和出口

四、webpack插件的使用

五、webpack中的loader

六、配置webpack的打包发布


Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源。

首先在安装webpack之前,你的本地环境需要先安装node.js 的环境。

一、安装webpack

在终端运行以下命令,安装webpack相关的包文件

npm install [email protected] [email protected] -D

二、配置webpack

1.在项目根目录中,创建名为webpack.config.js的配置文件,并初始化以下配置:

module.exports = {
    mode: 'development'   //mode 用来指定构建模式,可选值有development和production
}

//mode 的可选值有两个
// 1.development  开发环境,不会对打包生成的文件进行代码压缩和性能优化,且打包速度快,
//   适合在开发阶段使用。
// 2.production   生产环境,会对打包生成的文件进行代码压缩和性能优化,且打包速度很慢,
//   仅适合在项目发布阶段使用。

webpack.config.js是webpack的配置文件,webpack在真正开始打包构建之前,会先读取这个配置文件,从而基于给定的配置,对项目进行打包。

2.在package.json文件中的scripts节点下,新增dev脚本:

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

注意:配置webpack后,在index.html中导入的js文件应该为打包后的dist/js/main.js文件

webpack的使用,看这一篇就够了_第1张图片

 

三、自定义打包的入口和出口

在webpack中默认的打包入口文件为src下的index.js文件,默认的输出文件路径为dist 下的main.js文件。

但是,开发者可以自定义打包的入口和出口文件:

在webpack.config.js配置文件中,通过entry节点指定打包的入口,通过output节点指定打包的出口,如下所示:

const path =require('path')  //导入 node.js 中专门操作路径的模块

module.exports = {
  entry: path.join(__dirname, './src/index.js'),  //打包入口文件的路径
  output: {
    path: path.join(__dirname, './dist'), //输出文件的存放路径
    filename: 'newmain.js'  //输出文件的名称,将之前的main.js文件改为了newmain.js
  }
}

注意:自定义后,要将index.html中导入的dist/js/main.js文件的路径改为打包后的dist/js/newmain.js文件路径。

四、webpack插件的使用

通过插件的使用,可以拓展webpack的能力,从而让webpack用起来更方便,常用到的插件有两个:

1. webpack-dev-server

  作用:每当修改了源代码,webpack会自动进行项目的打包和构建,不需要开发者再重新运行npm ren dev 打包命令了。

2. html-webpack-plugin

作用:可以通过此插件自定制index.html页面的内容。

以下为两个插件的安装和配置方法

1. 安装和配置webpack-dev-server,

第一步:在终端运行以下命令:

npm install [email protected] -D
//@3.11.0是版本号,-D 是把这个包安装在开发节点下

第二步:配置webpack-dev-server

修改package.json文件中的scripts节点下的dev脚本

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

2. 安装和配置html-webpack-plugin,

第一步:在终端运行以下命令:

npm install [email protected] -D
//@3.11.0是版本号,-D 是把这个包安装在开发节点下

第二步:配置html-webpack-plugin

在webpack.config.js配置文件中,进行以下配置:

//1.导入HTML插件,得到一个构造函数
const Htmlplugin = require('html-webpack-plugin')

//2.创建HTML插件的实例对象
const htmlPlugin = new HtmlPlugin({
  template: './src/index.html',  //指定原文件的存放路径
  filename: './index.html'       //指定生成的文件的存放路径
})

module.exports = {
  mode: 'development',
  plugin: [htmlPlugin]  //通过plugin节点,使htmlPlugin插件生效
}

五、webpack中的loader

loader 概述: 在实际开发过程中,webpack默认只能打包处理以 .js 后缀名结尾的模块,其他非 .js 后缀名结尾的模块webpack默认处理不了,需要调用loader 加载器才可以正常打包,否则会报错。

loader加载器主要协助webpack打包处理特定的文件模块,例如:.css相关的文件、.less相关的文件、以及webpack无法处理的搞经济JS语法。

以下分别讲解配置步骤:

1.打包处理 css 文件

(1)运行以下命令,安装处理css文件的loader

npm i [email protected] [email protected] -D

(2)在webpack.config.js文件中的module节点下的rules数组中,添加loader规则如下:

module: {         //所有第三方文件模块的匹配规则
    rules: [      //文件后缀名的匹配规则
      { test: /\.css$/, use: ['style-loader',  'css-loader'] }
    ]
}

//test 表示匹配的文件类型,use表示对应的要调用的loader

2.打包处理 less 文件

(1)运行以下命令,安装处理less文件的loader

npm i [email protected] [email protected] -D

(2)在webpack.config.js文件中的module节点下的rules数组中,添加loader规则如下:

module: {         //所有第三方文件模块的匹配规则
    rules: [      //文件后缀名的匹配规则
      { test: /\.less$/, use: ['style-loader',  'css-loader', less-loader] },
    ]
}

3.打包处理样式表中与url路径相关的文件

(1)运行以下命令,安装处理url路径相关文件的loader

npm i [email protected] [email protected] -D

(2)在webpack.config.js文件中的module节点下的rules数组中,添加loader规则如下:

module: {         //所有第三方文件模块的匹配规则
    rules: [      //文件后缀名的匹配规则
      { test: /\.jpg|png|gif$/, use: 'url-loader?limit=25553'},
    ]
}

//limit用来指定图片的大小,单位是字节,只有<=limit大小的图片,才会被转为base64格式的图片

4.配置babel-loader

(1)运行以下命令,安装babel-loader相关的包

npm i [email protected] @babel/[email protected] @babel/[email protected] -D

(2)在webpack.config.js文件中的module节点下的rules数组中,添加loader规则如下:

module: {         //所有第三方文件模块的匹配规则
    rules: [      //文件后缀名的匹配规则
      { test: /\.js$,
          //exclude为排除项,表示babel-loader只需处理开发者编写的js文件,不需要处理node_modules下的js文件
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            //声明一个babel插件,此插件用来转化class中的高级语法
            plugins: ['@babel/plugin-proposal-class-properties'], 
          },
        },
      },
    ]
}

六、配置webpack的打包发布

在package.json文件的scripts节点下,新增build命令如下:

"scripts": {
    "dev": "webpack serve",  //开发环境下,运行npm run dev 命令打包
    "build": "webpack --mode production"  //项目发布时,运行npm run build 命令打包
}

1.把JavaScript文件统一生成到js目录中

在webpack.config.js配置文件的output节点中,进行如下的配置:

output: {
    path: path.join(__dirname, 'dist'),
    //明确告诉webpack把生成的newmain.js文件存放到dist目录下的js 子目录中
    filename: 'js/newmain.js',
}

2.把图片文件统一生成到image目录中

修改webpack.config.js配置文件中的url-loader配置项,新增outputPath选项即可指定图片文件的输出路径:

module: {         //所有第三方文件模块的匹配规则
    rules: [      //文件后缀名的匹配规则
      { test: /\.jpg|png|gif$/,
        use: {
            loader: 'url-loader',
            options: {
                limit: 25553,
                //明确指定把打包生成的图片文件,存储到dist目录下的image文件中
                outputPath: 'image',
            },
        },
      },
    ]
}

3.自动清理dist目录下的旧文件

(1)运行以下命令,安装clean-webpack-plugin插件

npm install [email protected] -D

(2)在webpack.config.js配置文件中导入插件并挂载

//按需导入插件、得到插件的构造函数之后,创建插件的实例对象
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const cleanPlugin = new CleanWebpackPlugin()

//把创建的cleanPlugin插件实例对象,挂载到plugins节点中
plugins: [htmlPlugin, cleanPlugin],

以上便是webpack 相关的知识点,欢迎收藏+点赞哦!

你可能感兴趣的:(前端技术合集,webpack,前端,javascript,vue.js)