webpack知识点总结

文章目录
Webpack知识点总结

1. 什么是webpack？
2. webpack 的特点？
3. webpack的核心？
4. webpack 手动搭建步骤

Webpack知识点总结

一、什么是webpack？

	打包工具
	静态资源打包工具
	前端必备

二、 webpack 的特点？

	js依赖进行整合处理 （打包整合）
	一些预处理的sass，less可以在环境中进行编译 （转换）
	可以对js、html、图片等进行压缩 （优化）

三、 webpack的核心？

		entry 入口文件 // 好比main.js
		output 出口文件 // 好比dist 打包之后的文件夹
		plugin 插件 // 自动生成html文件等插件
		loader 转换器 // sass less 转换成我们想要的文件类型
		dev-serve 服务器 // 使我们webpack在本地运行 服务
		mode 模式 // 可以切换开发环境 和 生成环境

四、webpack 手动搭建步骤

1、 确认 当前环境有没有 webpack -v

	为之后webpack的使用做前置准备

2、在想要成为 打包文件的文件夹中，使用 npm init -y 初始化一个package.json

	初始化依赖存储文件夹

3、 创建一个src，src下面创建一个index.html ,里面加一个div div随便起一个 id root名字，让引入bundle.js

	创建webpack的页面设置与改变

4、 src 中创建一个 main.js 作为主要开发文件，在里面进行dom操作，操作html中的root div

	完成主要页面创建及使用

5、 打包 webpack src/main.js --output src/bundle.js

	打包文档bundle.js

6、 每次打包观看 都打包这么长就 去配置一下

	配置打包文档，减少操作

7、 创建一个webpack.config.js

 const path = require("path")
  module.exports = {
      entry:"./src/main.js",
      output:{
          filename:"bundle.js",
          path:path.resolve(__dirname,"dist")
      }
  }

8、 运行webpack命令就可以进行打包

	执行打包命令

9、 建立本地服务器 cnpm i webpack-dev-server -D

	使用指令建立本地的服务器

10、 “dev”: “webpack-dev-server --open --port 8888 --contentBase src --hot”

	在main.js中添加热启动

11、 npm run dev 运行

	运行

12、 解决报错 cnpm i webpack@4.35.3 webpack-cli@3.3.5 -S

	出现错误降版本回退至较低版本即可运行

13、. npm run dev 就可以正常运行了
14、 下载依赖 cnpm i node-sass sass-loader style-loader css-loader -D

	使用sass，scss，下载依赖

15、在__webpack.config.js __配置 规则

    module: {
        rules: [
            //解析.scss文件,对于用 import 或 require 引入的sass文件进行加载，以及...声明的内部样式进行加载            
            {
              test: /\.scss$/,
              use:['style-loader', 'css-loader', 'sass-loader']
            }
        ]
    }

16、下载依赖 cnpm i html-webpack-plugin -D，自动生成html页面

	实现打包页面自动生成

17、. 在webpack.config.js 配置

// 插件

  plugins:[
      new htmlWebpackPlugin({
          filename:"index.html",
          template:path.join(__dirname,'index.html')
      })
  ],

配置完之后 运行即可, index.html 模板拿到和src同级