新手快速上手webpack4打包工具的使用

一直使用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的内容


<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" 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、运行后的效果

新手快速上手webpack4打包工具的使用

一、几个盲点的解释

二、webpack所谓的0配置使用

二、webpack的配置

三、配置开发环境(在内存中打包)

你可能感兴趣的:(新手快速上手webpack4打包工具的使用)

二、`webpack`所谓的0配置使用

二、`webpack`的配置