webpack4教程笔记（更新中）(1)

（3）进入项目，安装本地webpack，进入终端输入一下命令

• webpack webpack-cli -D （-D表示是开发依赖，上线的时候可以不需要）

• node_modules/.bin/webpack -v （查看安装的本地webpack版本号）

webpack如何进行配置

============================================================================

webpack本身是0配置的

---

（1）创建src目录，并且在下方创建需要的文件，比如js文件，通常创建index.js作为整个项目的js入口。我这里创建了两个js文件，作为模块引用的示范。

（2）npx webpack 自动打包生成dist文件夹和main.js，这是webpack进行0配置时候的情况。打包默认支持模块化。

如何进行手动配置

---

（1）创建根目录下的默认配置文件 webpack.config.js （写在项目文件夹下）

（2）在webpack.config.js中使用以下写法，使用node写法，定义入口文件和出口文件：

let path = require(‘path’);

console.log(path.resolve(‘dist’));

module.exports = {

mode: ‘development’, //模式 默认两种 生产模式 production 和 开发模式 development

entry: ‘./src/index.js’, //入口

output: {

filename: ‘bundle.js’, //打包后的文件名

path: path.resolve(__dirname, ‘build’), //路径必须是一个绝对路径

}

}

（3）终端输入 npx webpack 就会自动打包生成配置build文件夹和编译好的入口js文件bundle.js

（4）题外话：如果不想使用原来的默认配置文件 webpack.config.js这个名称，可以修改为 webpack.config.my…js等其他任意名称，但是此时npx webpack则不会生效，需要输入

npx webpack --config webpack.config.my.js

才能够执行编译打包工作。

（5）如果认为命令行太长的话，可以在package.json文件中进行快捷代码的配置：

“scripts”: {

“build”: “webpack --config webpack.config.js”,

},

此时命令行输入 npx run build或者npm run build和npx webpack --config webpack.config.my.js是一样的，都是打包编译js文件。

如何结合页面

=====================================================================

引入页面

---

在生成的build文件夹下创建一个index.html文件，并且引入生成的js文件：

打开页面的效果如下：

打开页面的方式有多种，如下：

但是建议使用装一个本地服务的方式来打开页面，这样会比较方便。

如何使用本地服务打开页面

---

（1）输入命令行yarn add webpack-dev-server用来安装一个本地的服务

（2）输入命令行npm webpack-dev-server可以起一个本地服务

但是这样不能够指定端口，因此需要进行配置。

如何手动配置本地服务

---

（1）先在package.json文件中加入快捷代码

“dev”: “webpack-dev-server”

（2）在webpack.config.js文件中进行开发服务器的配置：

devServer: { //开发服务器的配置

port: 8623, //端口如果被占用，就会出现404，此时修改为其他没有被占用的端口即可

progress: true, //显示进程

contentBase: ‘./build’, //服务器寻找的文件夹，会自动打开该文件夹下的index.html文件

},

（3）终端执行npm run dev，Ctrl+单击网址或者直接在网页中输入该网址，即可打开对应的index.html

（4）需要特别注意的是，如果页面出现了404，说明端口被占用，回到webpack.config.js配置文件中修改port为不被占用的端口即可

安装html插件

---

原本build文件中的index.html文件是我们自己放上去的。其实可以通过插件的方式，在src文件夹放一个html文件，进行html插件的配置，就可以实现build文件夹中的html文件和js文件的同时更新。

（1）终端输入yarn add html-webpack-plugin -D安装html插件

（2）src文件夹下创建index.html文件，不指定script

（3）在config文件中进行插件的引入和配置：

//webpack 是node写出来的 node写法

let path = require(‘path’);

console.log(path.resolve(‘build’));

let HtmlWebpackPlugin = require(‘html-webpack-plugin’);

最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
5708013388)]

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！