一、webpack基础配置
1、webpack安装
一般会安装本地的webpack,我们要安装两个:webpack 和 webpack-cli。
在webpack4.0中,我们就需要安装webpack和webpack-cli。
// 先初始化
npm init -y
// -D表示开发依赖, 上线的时候不需要
npm install webpack webpack-cli -D
安装完之后,就可以进入webpack的配置。
2、webpack可以进行0配置
webpack是一个打包工具,可以把源码进行打包。
新建一个源码目录 src,在src目录新建文件index.js 。
console.log('hello');
那我们想把index.js这个文件进行打包,我们可以直接运行webpack的命令。
npx webpack
打包结果:
webpack会自动生成一个dist目录。
3、webpack支持js的模块化
我们可以在js文件中写js模块化的东西。
在src目录新建 a.js 和 index.js
a.js
module.exports = 'hello'
index.js
let str = require('./a.js')
console.log(str)
运行webpack
npx webpack
打包结果:
在dist目录中新建index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="./main.js"></script>
</body>
</html>
直接用浏览器打开index.html,输出:hello。
4、手动配置webpack
默认配置文件的名字: webpack.config.js
在根目录新建 webpack.config.js文件
将dist目录删除掉,我们重新生成一下。
// webpack是node写出来的 node的写法
//path是node的内置模块,所以不需要去安装
let path = require('path');
module.exports = {
// 模式:默认有两种,一种叫生产环境production, 一种叫 development
// production 是经过压缩过的
// 所以,我们选择 development模式,可以看清打包后的代码
mode: 'development',
entry: './src/index.js', // 入口文件,也就是打包这个js文件
// 打包的文件位置
output: {
filename: 'bundle.js', // 打包出来当然文件名叫 bundle.js
// resolve() 可以把相对路径解析成绝对路径
// __dirname 是当前目录
path: path.resolve(__dirname, 'dist'), // 路径必须是一个绝对路径
}
}
然后,运行 npx webpack
打包结果:
5、可以指定默认的配置文件
可以更改默认配置文件的名字,比如写的 webpack.config.my.js
npx webpack --config webpack.config.my.js
也可以在package.json里面配置运行脚本
"scripts": {
"build": "webpack --config webpack.config.my.js"
},
npm run build
就相当于执行
npx webpack --config webpack.config.my.js
二、webpack打包出的文件解析
三、Html插件
我们希望在dist目录生成一个bundle.js文件的同时,也生成一个html文件。
1、webpack-dev-server
webpack-dev-server是webpack的开发服务器
先安装webpack-dev-server:
npm install webpack-dev-server -D
在dist目录下,新建index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="./bundle.js"></script>
</body>
</html>
然后运行:
npx webpack-dev-server
会生成一个内存中的打包。
在webpack.config.js中对开发服务器进行配置:
// webpack是node写出来的 node的写法
//path是node的内置模块,所以不需要去安装
let path = require('path');
module.exports = {
devServer: { // 开发服务器的配置
port: 3000,
progress: true, // 编译的进度条
contentBase: './dist', // 以dist目录为默认启动目录
compress: true, // 自动压缩
open: true // 自动打开浏览器,适合懒人
},
// 模式:默认有两种,一种叫生产环境production, 一种叫 development
// production 是经过压缩过的
// 所以,我们选择 development模式,可以看清打包后的代码
mode: 'development',
entry: './src/index.js', // 入口文件,也就是打包这个js文件
// 打包的文件位置
output: {
filename: 'bundle.js', // 打包出来当然文件名叫 bundle.js
// resolve() 可以把相对路径解析成绝对路径
// __dirname 是当前目录
path: path.resolve(__dirname, 'dist'), // 路径必须是一个绝对路径
}
}
也可以在package.json中配置运行:
"scripts": {
"build": "webpack",
"dev": "webpack-dev-server"
},
运行开发服务器:
npm run dev
浏览器打开:
http://localhost:3000/
2、Html插件
我们希望在打包的时候,自动生成html文件。
在src目录,新建index.html。
我们希望把src/index.js,放到src/index.html中,并且把打包结果放到dist目录下。
我们需要使用一个插件:html-webpack-plugin
安装:
npm install html-webpack-plugin -D
在webpack.config.js中引用:
let HtmlWebpackPlugin = require('html-webpack-plugin');
在webpack.config.js中进行插件的配置:
// webpack是node写出来的 node的写法
//path是node的内置模块,所以不需要去安装
let path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
devServer: { // 开发服务器的配置
port: 3000,
progress: true, // 编译的进度条
contentBase: './dist', // 以dist目录为默认启动目录
compress: true, // 自动压缩
open: true // 自动打开浏览器,适合懒人
},
// 模式:默认有两种,一种叫生产环境production, 一种叫 development
// production 是经过压缩过的
// 所以,我们选择 development模式,可以看清打包后的代码
mode: 'production',
entry: './src/index.js', // 入口文件,也就是打包这个js文件
// 打包的文件位置
output: {
// 当js文件更改, [hash]的值会变化,每次build会生成一个新的bundle.js文件
// [hash:8],只显示8位的hash值
filename: 'bundle.[hash:8].js', // 打包出来当然文件名叫 bundle.js
// resolve() 可以把相对路径解析成绝对路径
// __dirname 是当前目录
path: path.resolve(__dirname, 'dist'), // 路径必须是一个绝对路径
},
// 数组 放着所有的webpack插件
plugins: [
// 因为HtmlWebpackPlugin是一个类,所以使用的时候new一下
new HtmlWebpackPlugin({
template: './src/index.html', // 使用哪个html模板
filename: 'index.html', // 打包后也叫做 index.ht