webpack基础打包实践

最新推荐文章于 2024-08-26 15:13:15 发布

晓看天色暮看云~

最新推荐文章于 2024-08-26 15:13:15 发布

阅读量83

点赞数

文章标签： webpack 前端 javascript

本文链接：https://blog.csdn.net/lc_qj/article/details/131207273

版权

1. 为什么使用webpack？
随着JavaScript语言的发展，ES6 引入了模块化，ES6 的模块化分为export与import两个模块，因为浏览器不能直接识别es6模块化语法，比如html文件直接引入模块化语法文件结果：
count.js:

export default function count(x, y) {
    return x*y;
}

main.js

import count from "./js/count";
console.log(count(4,5));

直接引入index.ml

<body>
   <h1>webpack实践</h1>
   <script src="../pack/main.js"></script>
</body>

解析错误：
在这里插入图片描述
这个时候就需要使用webpack来打包编译文件，才能在浏览器使用我们的代码

2. webpack下载使用
webpack有开发模式development和生产模式production，开发模式下只能编译模块化语法，下载webpack的包就可以进行打包：
使用npm init -y 初始化包描述文件package.json:
在这里插入图片描述
使用 npm i webpack webpack-cli -D下载命令生成package-lock.json，就可以进行打包了
使用 npx webpack ./pack/main.js --mode=development 进行打包，生产打包文件dist：

index.ml路径替换成打包后文件，浏览器就可以编译了

<body>
   <h1>webpack实践</h1>
   <script src="../dist/main.js"></script>
</body>

在这里插入图片描述

3. webpack配置文件
为了打包更多的资源，需要通过webpack配置文件来配置
配置文件主要包含webpack的五大核心概念的配置
在当前目录创建webpack.config.js配置文件：
webpack.config.js：

const path = require("path"); //node.js处理路径模块
module.exports = {
    // 入口
	entry: "./pack/main.js", //路径
	// 输出路径
	output: {
		// __dirname node.js的变量 当前文件目录
		path: path.resolve(__dirname, "dist"),
		filename: "main.js",
	},
	// 加载器
	module: {
		rules:[
			// loader配置
		]
	},
	// 插件
  	plugins: [
		// plugin配置
	],
	// 模式
	mode: "development",
}

通过这个配置文件的基本配置，执行npm webpack进行打包，会根据我们配置的内容进行查找和打包因为没有其他资源配置，所以当前效果和前面的操作是一样的：
在这里插入图片描述

4. webpack处理样式和资源
webpack中文文档
 loaders文档
要处理样式资源我们要先去webpack文档找到loaders文档，查看文档需要使用的版本以及我们需要的loader资源包，进行下载
在这里插入图片描述

1.处理css资源
我们首先需要先安装style-loader、 css-loader：

npm install --save-dev style-loader
npm install --save-dev css-loader

配置webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/, // 只检测.css文件
        use: [//use可以使用多个，loader只能用一个
             // 执行顺序：从右到左（从下到上）
              "style-loader", // 将js中css通过创建style标签添加html文件中生效
              "css-loader", // 将css资源编译成commonjs的模块到js中
        ],
      },
    ],
  },
};

然后在main.js引入我们的css资源文件：

import "./css/index.css";

修改html应用：

<body>
  <div class="box1"></div>
  <script src="../dist/static/js/main.js"></script>
</body>

然后运行就会把我们的css资源打包到了js里面，我们就可以看到样式。
同样的我们可以处理less和sass的资源：
下载less-loader、sass-loader：

npm install less less-loader --save-dev
npm install sass-loader sass webpack --save-dev

添加资源配置webpack.config.js：

		 {
            test: /\.less$/,
            // loader: 'xxx', // 只能使用1个loader
            use: [
              // 使用多个loader
              "style-loader",
              "css-loader",
              "less-loader", // 将less编译成css文件
            ],
          },
          {
            test: /\.s[ac]ss$/,
            use: [
              "style-loader",
              "css-loader",
              "sass-loader", // 将sass编译成css文件
            ],
          },

在main.js引入我们的资源文件就可以编译使用了，类似的还有stylus-loader，参考文档就可以进行配置使用，实践项目中一般只使用一种合适的。还有babel-loader可以处理js文件兼容老的浏览器。
2.处理图片资源
可以通过webpack把小图片转化base64，用来减少请求数量，直接配置webpack.config.js：

{
            test: /\.(png|jpe?g|gif|webp|svg)$/,
            type: "asset",
            parser: {
              dataUrlCondition: {
                // 小于10kb的图片转base64
                // 优点：减少请求数量  缺点：体积会更大
                maxSize: 10 * 1024, // 10kb
              },
            },
            generator: {
              // 输出图片名称
              // [hash:10] hash值取前10位
              filename: "static/images/[hash:10][ext][query]",
            },
          }

在output的配置加上clean: true，可以清空掉上次打包的文件。
3.处理字体图标和其他资源

{
            test: /\.(ttf|woff2?|map3|map4|avi)$/,//文件类型
            type: "asset/resource",
            generator: {
              // 输出名称
              filename: "static/media/[hash:10][ext][query]",
            },
          }

4处理eslint
在webpack5，eslint换成插件使用，文档找到eslint插件配置，插件属于构造函数，可以用new进行引用

在这里插入图片描述
下载完成之后添加配置：

// 插件
  plugins: [
    // plugin的配置
    new ESLintPlugin({
      // 检测哪些文件
      context: path.resolve(__dirname, "../src"),
    })
  ],

新建一个eslint.js文件，添加eslint配置，然后下载eslint工具，就可以帮我们检查代码了：
在这里插入图片描述
类似插件引用还有HtmlWebpackPlugin插件，用来处理html资源，可以使用HtmlWebpackPlugin插件来自动引入资源：

plugins: [
    new HtmlWebpackPlugin({
      // 模板：以public/index.html文件创建新的html文件
      // 新的html文件特点：1. 结构和原来一致 2. 自动引入打包输出的资源
      template: path.resolve(__dirname, "../public/index.html"),
    }),
  ],

5. 代码热更新重新打包
1.下载包

npm i webpack-dev-serve -D

然后进行配置

 // 开发服务器: 不会输出资源，在内存中编译打包的
  devServer: {
    host: "localhost", // 启动服务器域名
    port: "3000", // 启动服务器端口号
    open: true, // 是否自动打开浏览器
  },

使用npx webpack serve进行打包，就可以实现修改自动更新。

6. 开发和生产环境处理
开发环境和生产环境可以分成两个配置文件，修改文件路径，并修改启动路径文件，就可以自定义需要的环境配置需求文件。
一般情况下，开发环境不需要output.path不需要输出，生产环境不需要devServer配置。
生产环境处理可以使用postcss-loader处理css兼容，MiniCssExtractPlugin，CssMinimizerWebpackPlugin，进行优化和压缩css
生产模式是默认压缩html和js的。

晓看天色暮看云~

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webpack基础打包实践

在main.js引入我们的资源文件就可以编译使用了，类似的还有stylus-loader，参考文档就可以进行配置使用，实践项目中一般只使用一种合适的。要处理样式资源我们要先去webpack文档找到loaders文档，查看文档需要使用的版本以及我们需要的loader资源包，进行下载。在webpack5，eslint换成插件使用，文档找到eslint插件配置，插件属于构造函数，可以用new进行引用。开发环境和生产环境可以分成两个配置文件，修改文件路径，并修改启动路径文件，就可以自定义需要的环境配置需求文件。
复制链接

扫一扫