webpack总结

一、基本概念

webpack：是一个打包模块化javascript的工具，通过loader转换文件，通过plugin注入钩子，最后输出由多个模块组合成的文件，webpack专注构建模块化项目。
（编写代码是开发环境，运行的是打包后的代码）

二、使用步骤

1.下载安装yarn

地址：https://yarn.bootcss.com/docs/install/#windows-stable

2.初始化包环境

yarn init

3.安装依赖包

yarn add webpack webpack-cli -D

4.package.json文件配置

scripts: {
   
	"build": "webpack"
}

5.新建src文件夹

6.运行打包命令

yarn build 

（所有要打包的资源都要和入口产生直接/间接的引用关系。执行webpack命令，找到配置文件，入口和依赖关系，打包代码输出到指定位置）

三、配置

1.打包的入口和出口

①入口文件：src-indexjs
②出口文件：dist-main.js
修改打包的入口和出口：在根目录下，新建webpack.config.js文件中新增如下配置信息：

const path = require('path') // 导入 node.js 中专门操作路径的模块
module.exports = {
   
 entry: path.join(__dirname, './src/index.js'), // 打包入口文件的路径
 output: {
   
 path: path.join(__dirname, './dist'), // 输出文件的存放路径
 filename: 'bundle.js' // 输出文件的名称
 }
}

2.自动打包功能

webpack-dev-server
开发服务器：启动本地服务，实时更改修改的代码，打包变化代码到内存中，然后直接提供端口和网页访问
①运行

yarn add webpack-dev-server -D

②配置命令

scripts: {
   
	"build": "webpack --config webpack.config.js",
	"serve": "webpack serve --config webpack.config.js"
}

③webpack.config中添加服务器配置

module.exports = {
   
    // ...其他配置
    devServer: {
   
      port