基础篇（一）：初识webpack的配置（手动搭脚手架、html-webpack-plugin、webpack-dev-server等）

目录

• 一.开发前准备
• 二.自定义webpack配置
• • 1.html-webpack-plugin自动引入资源
  • 2.清理dist
  • 3.mode环境
  • 4.source map
  • 5.watch mode
  • 6.webpack-dev-server

一.开发前准备

1.新建一个webpack-app文件夹，生成package.json文件

npm init -y

2.安装webpack

注意：建议安装webpack到当前项目，不要在全局，避免和小伙伴webpack版本不一致

npm install webpack webpack-cli --save-dev

// 检测版本
webpack -v

3.创建src文件夹、index.html及webpack.config.js文件

如图目录结构

二.自定义webpack配置

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')module.exports = {mode: 'development', // 环境entry: './src/index.js',output: {filename: 'bundle.js',path: path.resolve(__dirname, './dist'),clean: true, // 每次打包清理dist的文件assetModuleFilename: 'images/[contenthash][ext]' // 图片在dist打包里位置，优先级小于rules的generator},devtool: 'inline-source-map', // 浏览器console原来的位置module: {rules: [{test: /\.png$/,type: 'asset/resource', // 发送一个单独的文件并导出URL。之前通过使用 file-loader 实现generator: {filename: 'images/[contenthash][ext]'}},{text: /\.svg$/,type: 'asset/inline' // 导出一个资源的 data URI（base64）。之前通过使用 url-loader 实现},{text: /\.txt$/,type: 'asset/source' // 导出资源的源代码。之前通过使用 raw-loader 实现},{text: /\.jpg$/,type: 'asset', // 在导出一个 data URI 和发送一个单独的文件之间自动选择。之前通过使用 url-loader，并且配置资源体积限制实现parser: { // 解析器dataUrlCondition: {maxSize: 4 * 1024 * 1024 // 大于4M，dist生成资源文件，否则base64格式}}}]},plugins: [new HtmlWebpackPlugin({template: './index.html', // 打包前文件名filename: 'app.html', // 打包后文件名inject: 'body'  // 打包后js引入位置})],devServer: { // 热更新static: './dist',port: 8090,// open: true // 浏览器自动打开}
}

1.html-webpack-plugin自动引入资源

上面我们手动写了index.html加载dist/bundle.js，那如何自动生成app.html并引入打包资源呢？让该插件为我们生成一个 HTML 文件

npm install html-webpack-plugin -D

然后new实例化配置

2.清理dist

我们执行webpack后发现我们之前生成的一些文件还在，但事实上我们并不需要他们了，那我们该怎么在生成新的dist前清除掉旧的打包资源呢

在output中配置clean: true即可

3.mode环境

通过选择 development, production 或 none 之中的一个，来设置 mode 参数，你可以启用 webpack 内置在相应环境下的优化。其默认值为 production。

4.source map

source map能帮助我们在浏览器中调试时看到源码，以帮助我们精准的定位问题代码位置

配置devtool: 'inline-source-map’即可开启

5.watch mode

watch监听文件变化，当它们修改后会重新编译

webpack --watch

或

module.exports = {// ...watch: true,
};

6.webpack-dev-server

watch的唯一的缺点是，为了看到修改后的实际效果，我们需要刷新浏览器。我们使用这个插件实现热更新

npm install webpack-dev-server -D

配置devServer，看上面代码

module配置看下一篇

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！