关于手动使用webpack进行项目构建总结

最新推荐文章于 2024-08-29 16:21:36 发布

原创

最新推荐文章于 2024-08-29 16:21:36 发布 · 253 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#webpack #javascript

本文总结了手动使用webpack构建项目的详细步骤，包括创建项目结构、安装webpack和webpack-cli、配置webpack.config.js、引入jQuery、使用webpack-dev-server实现代码热更新。在项目中，通过webpack打包后，代码修改需手动重新打包。而webpack-dev-server则能在保存代码时自动打包并实时刷新页面，提高开发效率。

2020-11-09发布，原文链接关于手动使用webpack进行项目构建总结

总结一下手动使用webpack进行项目构建，都有哪些步骤，以及有哪些步骤需要注意的

以下内容前提条件是安装了node.js

一首先创建项目路径并添加src、dist项目结构

src下文件包括css、js、images、index.html、main.js

main.js是项目打包的入口文件

F:\project_center\webpack_project

在项目根路径中调用DOS窗口，输入生成项目配置文件package.json指令

npm init -y

二安装全局webpack，输入以下指令

npm i webpack -g

注意：webpack4版本及以上，使用webpack时，都需要安装webpack-cli

npm i webpack-cli -g

在项目中添加webpack.config.js文件，此文件是针对webpack的配置文件

// require引入path路径
const path = require('path')

// 通过node模块操作，向外部暴露一个配置对象
module.exports = {
  entry : path.join(__dirname , './src/main.js'), // 设置webpack打包入口文件
  output : {
    path : path.join(__dirname , './dist'), // 设置项目打包的输出文件路径
    filename : 'bundle.js' // 指定项目输出文件名称
  }
}

例如，在index