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 -v
-
在想要成为 打包文件的文件夹中,使用 npm init -y 初始化一个package.json
-
创建一个src,src下面创建一个index.html ,里面加一个div div随便起一个 id app名字,让引入bundle.js
-
src 中创建一个 main.js 作为主要开发文件,在里面进行dom操作,操作html中的app div
-
打包 webpack src/main.js --output src/bundle.js
-
每次打包观看,都需要输入一遍上方代码,去配置一下
// 创建一个webpack.config.js const path = require("path") module.exports = { entry:"./src/main.js", output:{ filename:"bundle.js", path:path.resolve(__dirname,"dist") } } // 运行webpack命令就可以进行打包
-
建立本地服务器 cnpm i webpack-dev-server -D
-
在package.json里配置
"dev": "webpack-dev-server --open --port 8888 --contentBase src --hot"
-
npm run dev 运行
-
如果发生报错就下载一下: cnpm i webpack@4.35.3 webpack-cli@3.3.5 -S
-
npm run dev 就可以正常运行了
-
设置scss
// 配置:下载依赖 cnpm i node-sass sass-loader style-loader css-loader -D // 在webpack.config.js 配置 规则 module: { rules: [ //解析.scss文件,对于用 import 或 require 引入的sass文件进行加载,以及...声明的内部样式进行加载 { test: /\.scss$/, use:['style-loader', 'css-loader', 'sass-loader'] } ] }
-
设置自动生成html页面
// 下载依赖 cnpm i html-webpack-plugin -D // 在webpack.config.js 配置 // 插件 plugins:[ new htmlWebpackPlugin({ filename:"index.html", template:path.join(__dirname,'index.html') }) ], // 配置完之后 运行即可, index.html 模板拿到和src同级