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"], // 新加的配置
          },
        },
      },

你可能感兴趣的:(vue,vue.js,js,html5,javascript,es6)