webpack4教程
准备工作
安装node和yarn,安装就成不是本文章的重点。所以请自行百度。
项目安装本地webpack
(1)创建一个项目,比如webpack-dev-1
(2)进入项目终端, yarn init -y
初始化
(3)进入项目,安装本地webpack,进入终端输入一下命令
webpack webpack-cli -D
(-D表示是开发依赖,上线的时候可以不需要)node_modules/.bin/webpack -v
(查看安装的本地webpack版本号)
webpack如何进行配置
webpack本身是0配置的
(1)创建src目录,并且在下方创建需要的文件,比如js文件,通常创建index.js作为整个项目的js入口。我这里创建了两个js文件,作为模块引用的示范。
(2)npx webpack
自动打包生成dist文件夹和main.js,这是webpack进行0配置时候的情况。打包默认支持模块化。
如何进行手动配置
(1)创建根目录下的默认配置文件 webpack.config.js (写在项目文件夹下)
(2)在webpack.config.js中使用以下写法,使用node写法,定义入口文件和出口文件:
let path = require('path');
console.log(path.resolve('dist'));
module.exports = {
mode: 'development', //模式 默认两种 生产模式 production 和 开发模式 development
entry: './src/index.js', //入口
output: {
filename: 'bundle.js', //打包后的文件名
path: path.resolve(__dirname, 'build'), //路径必须是一个绝对路径
}
}
(3)终端输入 npx webpack
就会自动打包生成配置build文件夹和编译好的入口js文件bundle.js
(4)题外话:如果不想使用原来的默认配置文件 webpack.config.js这个名称,可以修改为 webpack.config.my…js等其他任意名称,但是此时npx webpack则不会生效,需要输入
npx webpack --config webpack.config.my.js
才能够执行编译打包工作。
(5)如果认为命令行太长的话,可以在package.json文件中进行快捷代码的配置:
"scripts": {
"build": "webpack --config webpack.config.js",
},
此时命令行输入 npx run build
或者npm run build
和npx webpack --config webpack.config.my.js
是一样的,都是打包编译js文件。
如何结合页面
引入页面
在生成的build文件夹下创建一个index.html文件,并且引入生成的js文件:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="./bundle.js"></script>
</body>
</html>
打开页面的效果如下:
打开页面的方式有多种,如下:
但是建议使用装一个本地服务的方式来打开页面,这样会比较方便。
如何使用本地服务打开页面
(1)输入命令行yarn add webpack-dev-server
用来安装一个本地的服务
(2)输入命令行npm webpack-dev-server
可以起一个本地服务
但是这样不能够指定端口,因此需要进行配置。
如何手动配置本地服务
(1)先在package.json文件中加入快捷代码
"dev": "webpack-dev-server"
(2)在webpack.config.js文件中进行开发服务器的配置:
devServer: { //开发服务器的配置
port: 8623, //端口如果被占用,就会出现404,此时修改为其他没有被占用的端口即可
progress: true, //显示进程
contentBase: './build', //服务器寻找的文件夹,会自动打开该文件夹下的index.html文件
},
(3)终端执行npm run dev
,Ctrl+单击网址或者直接在网页中输入该网址,即可打开对应的index.html
(4)需要特别注意的是,如果页面出现了404,说明端口被占用,回到webpack.config.js配置文件中修改port为不被占用的端口即可
安装html插件
原本build文件中的index.html文件是我们自己放上去的。其实可以通过插件的方式,在src文件夹放一个html文件,进行html插件的配置,就可以实现build文件夹中的html文件和js文件的同时更新。
(1)终端输入yarn add html-webpack-plugin -D
安装html插件
(2)src文件夹下创建index.html文件,不指定script
(3)在config文件中进行插件的引入和配置:
//webpack 是node写出来的 node写法
let path = require('path');
console.log(path.resolve('build'));
let HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
devServer: { //开发服务器的配置
port: 8623, //端口如果被占用,就会出现404,此时修改为其他没有被占用的端口即可
progress: true, //显示进程
contentBase: './build', //服务器寻找的文件夹,会自动打开该文件夹下的index.html文件
compress: true
},
mode: 'development', //模式 默认两种 生产模式 production 和 开发模式 development
entry: './src/index.js', //入口
output: {
filename: 'bundle.js', //打包后的文件名
path: path.resolve(__dirname, 'build'), //路径必须是一个绝对路径
},
plugins: [ //数组 放着所有的webpack插件
new HtmlWebpackPlugin({
template: './src/index.html',
filename: 'index.html'
})
]
}
(4)删除原来的build目录,重新在终端输入npm run build
,就会重新自动生成build目录,并且包含js和index.html文件。
(5)重新终端输入npm run dev
单击连接,即可打开对应的端口
对html插件进行更多的配置
plugins: [ //数组 放着所有的webpack插件
new HtmlWebpackPlugin({
template: './src/index.html',
filename: 'index.html',
minify: {
removeAttributeQuotes: true, //删除不必要的双引号
collapseWhitespace: true, //折叠空行
},
hash: true //哈希戳:每次自动生成的不一样的一组数字
})
]
其中哈希戳也可以用于生成不同的js文件,防止被覆盖如果hash:8就表示只生成8位的哈希数字
output: {
filename: 'bundle[hash].js', //打包后的文件名,如果加上哈希戳 'bundle[hash].js' 就会每次生成不同的带有哈希戳的bundle.js文件,防止被覆盖
path: path.resolve(__dirname, 'build'), //路径必须是一个绝对路径
},