webpack整理

webpack整理 搭建过程 以及每个步骤的含义

webpack

sass gulp转换成css文件
一个页面很多个js文件，维护只能加 轻易不能删
页面的优化，js/html/css文件的压缩，图片压缩

webpack 是什么？

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

webpack 的特点？

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

webpack的核心？

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

webpack搭建步骤

全局安装webpack
npm install webpack webpack-cli –g
如果因为版本过高，无法执行相关指令，请安装其他版本
直接重新安装就行，使用 npm i webpack@4.35.3 -g

webpack 手动搭建步骤

1. 确认 当前环境有没有 webpack -v
   2. 在想要成为 打包文件的文件夹中，使用 npm init -y 初始化一个package.json
   3. 创建一个src，src下面创建一个index.html ,里面加一个div div随便起一个 id app名字，让引入bundle.js

5. src 中创建一个 main.js 作为主要开发文件，在里面进行dom操作，操作html中的app div
   6. 打包 webpack src/main.js --output src/bundle.js
   7. 每次打包观看 都打包这么长就 去配置一下
   8. 创建一个webpack.config.js
   const path = require(“path”)
   module.exports = {
   entry:"./src/main.js",
   output:{
   filename:“bundle.js”,
   path:path.resolve(__dirname,“dist”)
   }
   }
   9. 运行webpack命令就可以进行打包
   10. 建立本地服务器 cnpm i webpack-dev-server -D
   11. “dev”: “webpack-dev-server --open --port 8888 --contentBase src --hot”
   12. npm run dev 运行
   13. 解决报错 cnpm i webpack@4.35.3 webpack-cli@3.3.5 -S
   14. npm run dev 就可以正常运行了
   15. 下载依赖 cnpm i node-sass sass-loader style-loader css-loader -D
   16. 在webpack.config.js 配置 规则
   module: {
   rules: [
   //解析.scss文件,对于用 import 或 require 引入的sass文件进行加载，以及…声明的内部样式进行加载
   {
   test: /.scss$/,
   use:[‘style-loader’, ‘css-loader’, ‘sass-loader’]
   }
   ]
   }
   16. 自动生成html页面 下载依赖 cnpm i html-webpack-plugin -D
   17. 在webpack.config.js 配置
   // 插件
   plugins:[
   new htmlWebpackPlugin({
   filename:“index.html”,
   template:path.join(__dirname,‘index.html’)
   })
   ],
   18. 配置完之后 运行即可, index.html 模板拿到和src同级