webpack打包工具简单使用

webpack–打包工具

1.6.1 打包工具最本质的打包

第一步：安装特定版本

旧版本：npm install -save-dev webpack -D   
后面加上-D是表示开发时使用，上线后就不再使用。
如果使用webpack4+版本还需要安装一个webpack-cli的插件

npm install --save-dev webpack-cli -D

整体安装:npm i webpack webpack-cli -D

第二部：配置模式为开发模式

module.exports = {
  mode: "development", //配置打包模式为开发模式
};

第三步：配置入口文件和出口文件

默认入口文件为src下面的index.js文件，配置出口文件和入口文件的时候建议
写物理路径。

//1、引入路径文件
const path = require("path");
module.exports = {
  mode: "development", //配置打包模式为开发模式
 //2、配置入口文件
  entry: path.join(__dirname, "src", "index.js"), 
 //3、出口文件
  output: {
 //4、配置出口文件的路径
    path: path.join(__dirname, "dist"),
 //5、配置出口文件的名称
    filename: "bundle.js", 
  },
};

第三步：指定命令

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MapsJLjd-1616068155784)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210309144725191.png)]

最后，执行打包命C:\Users\Administrator\Desktop\网课\Vue\Vue第七天+webpack 打包工具\My_code\src\index.html令 ：

npm run dev

缺点：每一次修改时都需要重新运行命令很麻烦。

1.6.2 解决每次修改代码重新打包问题。

1.6.2.1工具webpack-dev-server让打包具有实施重新加载。

第一步：通过命令安装

npm install --save-dev webpack-dev-server -D

第二步：配置webpack.config.js文件

1、在module.exports中增加

 devServer: {
    contentBase: "./dist",
  },

2、在package.json中修改配置项中的“dev”值设置为webpack serve --open，
（–open可加也可不加，作用是打开网页http://localhost:8080/）

第三步：将src中的index复制一份放到dist目录下。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qq4h8Biv-1616068155785)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210309153851776.png)]

1.6.2.2html-webpack-plugin将src中代码拷贝到dist中。

第一步：通过命令安装

npm install --save-dev html-webpack-plugin -D
npm i loader-utils -D

注意：二者都需要安装不然报错！

第二步：配置webpack.config.js文件

1、引入html-webpack-plugin
const HtmlWebpackPlugin = require("html-webpack-plugin");
2、配置文件从哪里拷贝，拷贝到哪里去
const htmlPlugins = new HtmlWebpackPlugin({
  template: "./src/index.html", //要拷贝的文件
  filename: "index.html",
});
在module.exports 中调用：
plugins: [htmlPlugins],

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-brxe3KuR-1616068155786)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210309154424468.png)]

最后重新运行打包命令：npm run dev 即，解决了每次更新代码都要打包的问题。

1.6.3加载器

1.6.3.1 打包CSS文件

项目开发时我们虽然可以使用link来引入css文件，但是通过link引入的css文件会多出一个网络请求，而使用打包的方式就不会有网络请求。

link引入时要注意拷贝的文件是在根目录下注意引入路径。

1.6.3.1.1通过loader工具解决css打包

第一步：安装css-loader、style-loader

命令：npm i --save-dev css-loader style-loader

第二步：import引入

import "./css/index.css";
路径时相对于src目录的。

第三步：配置

在module.exports中配置module

module: {
    rules: [{ test: /\.css$/, use: ["style-loader", "css-loader"] }],
  },

1.6.3.2通过loader工具解决less打包

第一步：安装less和less-loader：

npm i less less-loader --save-dev -D

第二部:配置

在rules规则中新加一条{ test: /\.less$/, use: ["style-loader", "css-loader","less-loader"] }

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kL4x9oiG-1616068155787)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210309162027897.png)]

注意：不要忘记在index.js中import引入less文件。

1.6.3.3webpack处理图片

第一步安装

命令：npm i file-loader url-loader -D

第二部配置webpackage.config.js

{
test:/\.jpg|png/,
use:[{
loader:'url-loader',//使用url-loader来处理图片
options:{
limit:614400
//当图片大小小于limit值时，会将图片转换成base64为的格式打包到出口文件内减少一次网络请求
//当图片大小大于limit值时，会通过网络请求的方式打包到dist文件夹内。
}
}]
}

重新打包即可。

1.6.3.4 webpack处理高级语法

第一步：安装

npm install -D babel-loader @babel/core @babel/preset-env
npm i -D @babel/plugin-proposal-class-properties

第二部：配置
在webpackage.config.js中的rules规则中加入：

//配置处理高级语法
      {
        test: /\.m?js$/, //处理js文件或mjs文件
        //处理文件时候不处理node_modules和bower_components的文件
        //排除作用
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: "babel-loader", //使用babel-loader处理
          options: {
            presets: ["@babel/preset-env"], //使用babel-loader处理文件时有很多模式，
            //此行代码目的时设置为@bable/preset-env模式来处理文件。
            plugins: ["@babel/plugin-proposal-class-properties"], // 新加的配置
          },
        },
      },