webpack4+babel7入门到精通(1、环境的搭建)

时间 2019-11-06

标签 webpack4+babel7 webpack babel 入门精通环境搭建繁體版

原文原文链接

一直使用webpack,上次也分享过webpack配置es6~9的语法参考连接,可是对于一些小白童鞋来讲,最基本的配置都不太知道,恰好利用春节休假期间对webpack4的知识点梳理一次。方便一些刚刚入行的人学习,也是对本身的一种总结与提升javascript

1、几个盲点的解释

一、全局安装与局部安装html
- 对于通常的新手都有一个疑惑我是全局安装仍是本项目中安装(局部安装),我的建议,如今前端发展那么快,咱们使用局部安装的方式更好(使用最新的技术栈)。
- 咱们知道javascript是弱语言,有局部变量和全局变量,其实全局安装与局部安装的性质与函数的全局变量与局部变量有点相似。
二、安装包的时候--save与-D的区别前端
通常咱们仅仅是在开发环境依赖的包直接使用-D就能够,这样就会在项目的package.json文件中的devDependencies新增相关的配置信息java
```
npm install webpack webpack-cli -D
复制代码
```
--save是会放在package.json文件的dependencies中webpack
记住仅仅是开发环境须要使用的包就使用-Des6

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

webpack是基于配置的前端脚手架,在实际项目中开发须要配置你须要的插件与加载器。web

一、webpack最基本的基重要的是:shell
plugins:配置插件的npm
module:主要配置一些加载器json
二、初始化项目
建立一个文件夹webpack-demo
初始化生成package.json文件
```
npm init --yes
复制代码
```

三、安装webpack最基本的依赖包

npm install webpack webpack-cli -D
复制代码

四、建立一个文件夹src并在里面建立一个index.js的文件
五、在命令行中运行(先忽视警告信息)
```
npx webpack
复制代码
```
六、在生成的dist文件夹下会生成一个大包好的main.js文件,在该文件夹下建立一个index.html文件引入main.js,在浏览器中查看控制台是否输出信息。

2、`webpack`的配置

一、在项目下建立一个webpack.config.js文件

二、能够配置的有

const path = require('path');

module.exports = {
  entry: '',  // 打包文件的入口
  output: {}, // 打包后的出口文件配置
  devServer: {}, // 开发服务器
  module: {}, // 模块配置
  plugins: {}, // 插件的配置
  mode: 'development', // ['development', 'production']模式
  resolve: {}, // 配置解析
}
复制代码

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

一、安装包

npm install webpack-dev-server -D
复制代码

二、在webpack.config.js中配置入口文件与出口文件

module.exports = {
  entry: './src/index.js',  // 打包文件的入口
  output: {
    filename: 'build.js',
    // 注意这个位置必须是绝对路径
    path: path.join(__dirname, 'dist')
  },
  ...
}
复制代码

三、配置开发devServer

module.exports = {
  ...
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    port: 8000,
    compress: true, // 自动压缩
    open: true, // 自动打开浏览器
  },
}
复制代码

四、在package.json中配置命令

...
"scripts": {
	"dev": "webpack-dev-server",
},
...
复制代码

五、调试性的运行命令(会自动打开浏览器,可是里面没任何信息展现)
```
npm run dev
复制代码
```

六、使用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 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的配置请查看
六、运行npm run dev直接打开浏览器,打开控制台能够查看到打印信息

七、建立打包命令(在package.json中添加命令)

"scripts": {
	"dev": "webpack-dev-server",
	"build": "webpack"
},
复制代码

八、使用哈希值的方式建立随机生成数字,解决缓存的问题

一、对生成的js文件生成随机数

output: {
	filename: 'build.[hash].js', // 默认生成20位的哈希值
	// filename: 'build.[hash:8].js' 能够定制生成多少位的随机数
	// 注意这个位置必须是绝对路径
	path: path.join(__dirname, 'dist')
},
复制代码

二、对html里面引入的js生成哈希值(会生成?哈希值)

plugins: [
	new HtmlWebpackPlugin({
		template: './src/index.html',
		title: 'webpack测试',
		hash: true,
	})
],
复制代码

三、运行命令npm run build能够查看dist文件夹下的文件是否带了尾巴(注意点:要更新文件打包会生成新的,若是没改动文件,仅仅是屡次打包是同样的)

四、运行后的效果

<script type="text/javascript" src="build.1ac0ed4b.js?1ac0ed4bfca95df7576e"></script>	
复制代码

九、关于html-webpack-plugin其它经常使用的配置

new HtmlWebpackPlugin({
  ...
  minify: {
    removeAttributeQuotes: true, // 去除双引号
    collapseWhitespace: true, // 合并代码到一行
  }
})
复制代码

4、清除以前的`plugin`的插件的使用

咱们对每次打包后的缓存文件进行删除确保每次都是最新的

一、安装

npm install clean-webpack-plugin -D
复制代码

二、在webpack.config.js中使用

const CleanWebpackPlugin = require('clean-webpack-plugin');
plugins: [
	new CleanWebpackPlugin(['./dist']),
	...
],
复制代码

5、关于`webpack`入口文件的几种方式

一、单一入口文件(参考上面)

二、多入口文件(能够写成一个数组),共同打包带一个出口文件中

module.exports = {
  mode: 'development',
  entry: [
    './src/index.js',
    './src/a.js'
  ],
  output: {
    filename: 'build.[hash:8].js',
    // 注意这个位置必须是绝对路径
    path: path.join(__dirname, 'dist')
  }
}
复制代码

三、多入口多出口多模板的模式

1.入口文件与出口文件的配置

module.exports = {
  mode: 'development',
  entry: {
    index: './src/index.js',
    a: './src/a.js'
  },
  output: {
    filename: '[name].[hash:8].js',
    path: path.join(__dirname, 'dist')
  }
}
复制代码

2.模板的配置(须要注明输出文件的名字)

...
plugins: [
    new CleanWebpackPlugin(['./dist']),
    new HtmlWebpackPlugin({
      filename: 'index.html', // 注明打包后的文件名
      template: './src/index.html',
      title: 'webpack测试1',
      hash: true,
      chunks: ['index']  // 注明选择哪一个js文件
    }),
    new HtmlWebpackPlugin({
      filename: 'a.html',
      template: './src/index.html',
      title: 'webpack测试2',
      hash: true,
      chunks: ['a']
    })
  ],
}
...
复制代码

3.若是文件不少,能够采用读取文件的方式

...
// 定义入口文件
let entry = {};
const glob = require("glob");
let HtmlPlugin = [];

glob.sync('./src/*.html').forEach(item => {
	const filename = path.basename(item).toLowerCase();
	const chunk = filename.replace('.html', '');
	entry[chunk] = `./src/${chunk}.js`;
	HtmlPlugin.push(
		new HtmlWebpackPlugin({
			filename: filename,
			template: path.resolve(item),
			inject: 'body',
			title: 'webpack测试',
			chunks: [chunk],
			hash: true,
			minify: {
				removeAttributeQuotes: true, // 去除引号
				collapseWhitespace: false, // true代码合并成一行
			}
		})
	)
})
module.exports = {
	entry: entry, // 使用读取的入口文件(注意文件不能少[html的和js的名字要一致])
	output: {
		path: path.join(__dirname, 'dist'),
		filename: '[name].[hash:8].js', // 会自动根据上面的name来取名字
	},
	devServer: {
		contentBase: path.join(__dirname, 'dist'),
		port: 8000,
		compress: false,
		open: true,
	},
	plugins: [
		new CleanWebpackPlugin(), // 每次打包清空dist文件夹
		...HtmlPlugin,
	],
	module: {},
	resolve: {}
}
复制代码

6、`webpack`热更新的使用

一、根据上面的方式咱们能够实现,修改js代码浏览器会刷新,可是是相似咱们人工的刷新(若是是有状态机的数据的时候会丢失数据)
二、咱们可使用webpack自带的一个热更新的插件

三、使用方式

1.在webpack.config.js中配置

const webpack = require('webpack');
...
plugins: [
    new webpack.HotModuleReplacementPlugin(), // 每次修改代码在开发环境的时候会自动刷新
    ...
]
...
复制代码

2.在主要的入口index.js文件中加上

if (module.hot) {
  module.hot.accept();
}
复制代码

webpack4+babel7入门到精通(1、环境的搭建)

1、几个盲点的解释

2、webpack所谓的0配置使用

2、webpack的配置

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

4、清除以前的plugin的插件的使用

5、关于webpack入口文件的几种方式

6、webpack热更新的使用

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

2、`webpack`的配置

4、清除以前的`plugin`的插件的使用

5、关于`webpack`入口文件的几种方式

6、`webpack`热更新的使用