%20(2).svg)
项目简介
本项目是一个基于Webpack 4的入门配置项目，能帮助开发者快速上手Webpack的基本配置和使用。项目包含从初始化项目、安装依赖、配置Webpack，到处理JavaScript、CSS、Less文件，以及图片资源和热更新的完整流程。
项目的主要特性和功能
- 模块打包：借助Webpack进行模块打包，提升代码的复用性与可维护性。
- CSS和Less处理：支持引入、解析和打包CSS与Less文件，同时自动添加浏览器前缀。
- 图片资源处理：支持引入和打包图片文件，可将小图片转换为Base64格式。
- JavaScript转义：使用Babel对JavaScript文件进行转义，保障代码在不同环境的兼容性。
- 热更新：利用Webpack Dev Server实现本地开发环境的热更新，提高开发效率。
安装使用步骤
1. 环境准备
确保已安装Node.js和npm。在项目根目录下执行以下命令初始化项目：
bash
npm init
2. 安装依赖
安装项目所需的所有依赖：
bash
npm install --save-dev webpack@4 webpack-cli html-webpack-plugin clean-webpack-plugin style-loader css-loader less less-loader mini-css-extract-plugin file-loader url-loader babel-loader @babel/core @babel/preset-env webpack-dev-server
3. 配置Webpack
在项目根目录下创建webpack.config.js文件，并根据项目需求进行配置，示例如下：
```javascript
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = { mode: 'development', entry: './src/main.js', output: { filename: '[name].[hash:8].js', path: path.resolve(__dirname, 'dist') }, module: { rules: [ { test: /.js$/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-env'] } }, exclude: /node_modules/ }, { test: /.css$/, use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader'] }, { test: /.less$/, use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'less-loader'] }, { test: /.(png|jpg|gif|svg)$/, use: [ { loader: 'url-loader', options: { limit: 10240, fallback: { loader: 'file-loader', options: { name: 'img/[name].[hash:8].[ext]' } } } } ] } ] }, plugins: [ new CleanWebpackPlugin(), new HtmlWebpackPlugin({ template: './public/index.html' }), new MiniCssExtractPlugin({ filename: '[name].[hash].css', chunkFilename: '[id].css' }) ], devServer: { contentBase: './dist', hot: true } }; ```
4. 编写代码
在src目录下编写项目代码，包括JavaScript、CSS、Less文件和图片资源，如：
- src/main.js：项目的入口文件。
- src/assets/index.css：CSS样式文件。
- src/assets/index.less：Less样式文件。
- src/assets/image.png：图片资源。
5. 构建项目
在package.json中添加构建命令：
json
"scripts": {
"build": "webpack --config webpack.config.js",
"dev": "webpack-dev-server --config webpack.config.js"
}
执行以下命令进行项目构建：
bash
npm run build
6. 启动开发服务器
执行以下命令启动本地开发服务器，并进行热更新：
bash
npm run dev
下载地址
点击下载 【提取码: 4003】【解压密码: www.makuang.net】