一直使用webpack,上次也分享过webpack配置es6~9的语法参考链接,但是对于一些小白童鞋来说,最基本的配置都不太知道,刚好利用春节休假期间对webpack4的知识点梳理一次。方便一些刚刚入行的人学习,也是对自己的一种总结与提高
一、几个盲点的解释
1、全局安装与局部安装
对于一般的新手都有一个疑惑我是全局安装还是本项目中安装(局部安装),个人建议,现在前端发展那么快,我们使用局部安装的方式更好(使用最新的技术栈)。
我们知道javascript是弱语言,有局部变量和全局变量,其实全局安装与局部安装的性质与函数的全局变量与局部变量有点类似。
2、安装包的时候--save与-D的区别
一般我们仅仅是在开发环境依赖的包直接使用-D就可以,这样就会在项目的package.json文件中的devDependencies新增相关的配置信息
npm install webpack webpack-cli -D
--save是会放在package.json文件的dependencies中
记住仅仅是开发环境需要使用的包就使用-D
二、webpack所谓的0配置使用
webpack是基于配置的前端脚手架,在实际项目中开发需要配置你需要的插件与加载器。
1、webpack最基本的基重要的是:
plugins:配置插件的
module:主要配置一些加载器
2、初始化项目
创建一个文件夹webpack-demo
初始化生成package.json文件
npm init --yes
3、安装webpack最基本的依赖包
npm install webpack webpack-cli -D
4、创建一个文件夹src并在里面创建一个index.js的文件
5、在命令行中运行(先忽视警告信息)
npx webpack
6、在生成的dist文件夹下会生成一个大包好的main.js文件,在该文件夹下创建一个index.html文件引入main.js,在浏览器中查看控制台是否输出信息。
二、webpack的配置
1、在项目下创建一个webpack.config.js文件
2、可以配置的有
const path = require('path'); module.exports = { entry: '', // 打包文件的入口 output: {}, // 打包后的出口文件配置 devServer: {}, // 开发服务器 module: {}, // 模块配置 plugins: {}, // 插件的配置 mode: 'development', // ['development', 'production']模式 resolve: {}, // 配置解析 }
三、配置开发环境(在内存中打包)
1、安装包
npm install webpack-dev-server -D
2、在webpack.config.js中配置入口文件与出口文件
module.exports = { entry: './src/index.js', // 打包文件的入口 output: { filename: 'build.js', // 注意这个位置必须是绝对路径 path: path.join(__dirname, 'dist') }, ... }
3、配置开发devServer
module.exports = { ... devServer: { contentBase: path.join(__dirname, 'dist'), port: 8000, compress: true, // 自动压缩 open: true, // 自动打开浏览器 }, }
4、在package.json中配置命令
... "scripts": { "dev": "webpack-dev-server", }, ...
5、调试性的运行命令(会自动打开浏览器,但是里面没任何信息展示)
npm run dev
6、使用html-webpack-plugin自动生成html页面的插件
1.安装包
npm install html-webpack-plugin -D
2.在webpack.config.js中引入
const HtmlWebpackPlugin = require('html-webpack-plugin');
3.在plugins中配置
plugins: [ new HtmlWebpackPlugin({ template: './src/index.html', title: 'webpack测试', }) ],
4.关于index.html的内容
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title><%=htmlWebpackPlugin.options.title%></title> </head> <body> </body> </html>
5.关于html-webpack-plugin的配置请查看
6、运行npm run dev直接打开浏览器,打开控制台可以查看到打印信息
7、创建打包命令(在package.json中添加命令)
"scripts": { "dev": "webpack-dev-server", "build": "webpack" },
8、使用哈希值的方式创建随机生成数字,解决缓存的问题
1、对生成的js文件生成随机数
output: { filename: 'build.[hash].js', // 默认生成20位的哈希值 // filename: 'build.[hash:8].js' 可以定制生成多少位的随机数 // 注意这个位置必须是绝对路径 path: path.join(__dirname, 'dist') },
2、对html里面引入的js生成哈希值(会生成?哈希值)
plugins: [ new HtmlWebpackPlugin({ template: './src/index.html', title: 'webpack测试', hash: true, }) ],
3、运行命令npm run build可以查看dist文件夹下的文件是否带了尾巴(注意点:要更新文件打包会生成新的,如果没改动文件,仅仅是多次打包是一样的)
4、运行后的效果
<script type="text/javascript" src="build.1ac0ed4b.js?1ac0ed4bfca95df7576e"></script>
9、关于html-webpack-plugin其它常用的配置
new HtmlWebpackPlugin({ ... minify: { removeAttributeQuotes: true, // 去除双引号 collapseWhitespace: true, // 合并代码到一行 } })
四、清除之前的plugin的插件的使用
我们对每次打包后的缓存文件进行删除确保每次都是最新的
1、安装
npm install clean-webpack-plugin -D
2、在webpack.config.js中使用
const CleanWebpackPlugin = require('clean-webpack-plugin'); plugins: [ new CleanWebpackPlugin(['./dist']), ... ],
五、关于webpack入口文件的几种方式
1、单一入口文件(参考上面)
2、多入口文件(可以写成一个数组),共同打包带一个出口文件中