针对“webpack4简单入门实例”的完整攻略,我会分为以下几个部分进行详细讲解:
1.什么是webpack
2.环境准备
3.webpack配置入门
4.样式加载及ES6转码入门
5.多页应用Webpack处理
6.插件及打包输出调整
7.示例说明
8.总结
一、什么是webpack
Webpack是一个模块打包器,通过分析模块之间的依赖关系,将所有模块打包成一个或多个文件。Webpack4主要包含四个核心概念:Entry、Output、Loader和Plugin。
Entry:指示Webpack应该从哪个模块开始创建依赖图。在webpack4中可以省略该属性,因为默认入口为./src/index.js。
Output:指定Webpack编译后打包的文件存放的位置、文件名等参数。
Loader:实现对不同类型的文件如何在Webpack编译过程中进行预处理。
Plugin:为Webpack扩展功能,如优化、压缩等。
二、环境准备
1.确保安装了Node.js,可以在命令行中输入npm -v 和node -v查看版本号。
npm -v
node -v
2.在本地新建一个项目目录,执行命令 cd 项目目录。
3.执行命令 npm init 初始化项目,生成package.json文件。
4.安装Webpack4和webpack-cli:npm install webpack webpack-cli -D。-D表示安装至devDependencies开发环境中。
5.准备工程文件夹结构,参考如下:
|-- src
| |-- index.js // 入口JS文件
| |-- style.css // 样式表
| |-- assets // 静态资源
|-- dist // 打包后文件
|-- node_modules // 安装的依赖包
|-- package.json // Node.js 项目配置文件
|-- webpack.config.js // Webpack配置文件
|-- .gitignore // Git 版本控制忽略文件配置
三、webpack配置入门
1.在项目根目录下创建webpack.config.js文件:
const path = require('path') // 引入node中的path模块
module.exports = {
entry: './src/index.js', // 默认是 './src/index.js'
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
}
2.在package.json文件中添加以下命令:
"scripts": {
"build": "webpack --config webpack.config.js"
}
3.执行命令npm run build即可执行打包操作。
四、样式加载及ES6转码入门
1.安装相关的loader:
npm install style-loader css-loader postcss-loader autoprefixer babel-loader @babel/core @babel/preset-env -D
2.在webpack.config.js文件中添加以下配置:
const autoprefixer = require('autoprefixer') // 前缀
const path = require('path')
module.exports = {
entry: './src/index.js', // 默认是 './src/index.js'
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader', 'postcss-loader'],
},
{
test: /\.js$/,
exclude: /(node_modules)/,
use: ['babel-loader'],
},
]
},
plugins: [
new webpack.LoaderOptionsPlugin({
options: {
postcss: [autoprefixer()]
}
})
]
}
五、多页应用Webpack处理
1.新增index.html和about.html文件
2.新增index.js和about.js文件
3.webpack.config.js文件中添加以下配置:
module.exports = {
entry: {
// 分别打包index.js和about.js
index: './src/index.js',
about: './src/about.js'
},
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
},
plugins: [
new HtmlWebpackPlugin({
filename: 'index.html',
template: './src/index.html'
}),
new HtmlWebpackPlugin({
filename: 'about.html',
template: './src/about.html'
})
]
}
六、插件及打包输出调整
1.安装相关的插件:
npm install css-minimizer-webpack-plugin terser-webpack-plugin html-webpack-plugin -D
2.在webpack.config.js文件中添加以下配置:
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin') // 压缩css
const TerserPlugin = require('terser-webpack-plugin') // 压缩js
const HtmlWebpackPlugin = require('html-webpack-plugin') // html plugin
const autoprefixer = require('autoprefixer') // 前缀
const path = require('path')
const webpack = require('webpack')
module.exports = {
entry: {
// 分别打包index.js和about.js
index: './src/index.js',
about: './src/about.js'
},
output: {
filename: '[name].[contenthash:8].bundle.js', // 将文件hash化,解决文件缓存问题
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader', 'postcss-loader'],
},
{
test: /\.js$/,
exclude: /(node_modules)/,
use: ['babel-loader'],
},
]
},
plugins: [
new HtmlWebpackPlugin({
filename: 'index.html',
template: './src/index.html',
chunks: ['index']
}),
new HtmlWebpackPlugin({
filename: 'about.html',
template: './src/about.html',
chunks: ['about']
}),
new webpack.LoaderOptionsPlugin({
options: {
postcss: [autoprefixer()]
}
})
],
optimization: {
minimize: true,
minimizer: [
new CssMinimizerPlugin(),
new TerserPlugin({
extractComments: false,
terserOptions: {
output: {
comments: false,
},
},
}),
],
runtimeChunk: {
name: 'runtime',
},
},
}
七、示例说明
1.编写index.js文件:
import './style.css'
console.log('Hello World!')
2.编写style.css文件:
h1 {
display: flex;
justify-content: center;
}
3.编写index.html文件:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Webpack4 简单入门实例</title>
</head>
<body>
<h1>Hello World!</h1>
<script src="./index.bundle.js"></script>
</body>
</html>
4.编译:npm run build
5.在浏览器中打开index.html,可以看到“Hello World!”文字居中显示。
八、总结
以上就是对于“Webpack4简单入门实例”的详细讲解,内容涵盖了Webpack的核心概念、环境准备、webpack配置入门、样式加载及ES6转码入门、多页应用Webpack处理和插件及打包输出调整等方面。需要注意的是,Webpack的使用也是有一定门槛的,需要多加尝试和实践,才能真正掌握Webpack的使用技巧。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:webpack4简单入门实例 - Python技术站