webpack4.0（第一章）项目从入门到理解。
2021-06-14 本文已影响0人
锋叔
首先我们忘记webpack，然后我们现在搭建一个项目
项目结构
webpack-demo
+ |- index.html
+ |- index.js
+ |- style.less
- 项目就这么简单，一个html入口，包含一个js文件和一个css文件，简单就构造一个前端项目了。
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>一个webpack项目</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="./style.less">
</head>
<body>
<h1>hello world</h1>
<div class="box">
<p>我是一个div</p>
</div>
<script src="./index.js"></script>
</body>
</html>
index.js
// 引入js资源
import $ from 'jquery';
// 引入样式资源
import './index.less';
// 引入图片、字体等其他资源
$('#box1').click(() => {
$('#box1').css('backgroundColor', 'deeppink');
});
style.less
body {
.box {
background-color: red;
color: white;
}
}
- 问题来了，这玩意儿能跑起来？当然不能，麻雀虽小却五脏俱全哈，从less到箭头函数，从jquery到Es6哈。怎么跑起来呢？构建工具就诞生了！
我们需要一个构建工具来整合整个项目，把es6的东西转换成es5，把less转换成css，下载其他依赖，这样把整个项目运行起来。
构建工具
- 市场上的构建工具比较广为人知的就三四个，gulp，grunt，webpack，而前两者更轻量，目前已经开始走另外的路了，webpack已经成为当下最流行的构建工具了，所以我们今天就学最流行的。
webpack入门
核心概念：（可点击跳转官网哈。）
安装webpack
- 这一步大家自己去找，官网上也有安装步骤，无非是node.js npm webpack-cli
项目配置webpack依赖
1、配置，直接回车回车回车。
npm init
运行成功后我们的项目应该变成了这样：
webpack-demo
+ |- index.html
+ |- index.js
+ |- style.less
+ |- package.json
package.json
{
"name": "webpack-demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "z_d_f",
"license": "ISC"
}
节省时间直接给你建立一个比较齐全且配置不错的项目
项目结构
webpack-demo
+ |- dist
+ |- src
+ |- index.js
+ |- style.less
+ |- index.html
+ |- package.json
+ |- webpack.config.json
src/index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>一个webpack项目</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h1>hello world</h1>
<div class="box">
<p>我是一个div</p>
</div>
</body>
</html>
src/style.less
body {
.box {
background-color: red;
color: white;
}
}
webpack.config.json
/*
webpack.config.js webpack的配置文件
作用: 指示 webpack 干哪些活（当你运行 webpack 指令时，会加载里面的配置）
所有构建工具都是基于nodejs平台运行的~模块化默认采用commonjs。
*/
// resolve用来拼接绝对路径的方法
const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
// webpack配置
// 入口起点
entry: './src/index.js',
// 输出
output: {
// 输出文件名
filename: 'bundle.js',
// 输出路径
// __dirname nodejs的变量，代表当前文件的目录绝对路径
path: resolve(__dirname, 'dist')
},
// loader的配置
module: {
rules: [
// 详细loader配置
// 不同文件必须配置不同loader处理
{
// 匹配哪些文件
test: /\.css$/,
// 使用哪些loader进行处理
use: [
// use数组中loader执行顺序：从右到左，从下到上 依次执行
// 创建style标签，将js中的样式资源插入进行，添加到head中生效
'style-loader',
// 将css文件变成commonjs模块加载js中，里面内容是样式字符串
'css-loader'
]
},
{
test: /\.less$/,
use: [
'style-loader',
'css-loader',
// 将less文件编译成css文件
// 需要下载 less-loader和less
'less-loader'
]
}
]
},
// plugins的配置
plugins: [
// 详细plugins的配置
new CleanWebpackPlugin(),
// plugins的配置
// html-webpack-plugin
// 功能：默认会创建一个空的HTML，自动引入打包输出的所有资源（JS/CSS）
// 需求：需要有结构的HTML文件
new HtmlWebpackPlugin({
// 复制 './index.html' 文件，并自动引入打包输出的所有资源（JS/CSS）
template: './index.html',
title: '一个简单的webpack应用程序',
})
],
// 模式
mode: 'development', // 开发模式
// mode: 'production'
}
package.json
{
"name": "webpack-demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "z_d_f",
"license": "ISC",
"devDependencies": {
"clean-webpack-plugin": "^4.0.0-alpha.0",
"css-loader": "^5.2.6",
"html-webpack-plugin": "^5.3.1",
"jquery": "^3.6.0",
"less": "^4.1.1",
"less-loader": "^9.1.0",
"style-loader": "^2.0.0",
"webpack-cli": "^4.7.2"
}
}
npm安装的依赖
npm i jquery -D
npm i clean-webpack-plugin -D
npm i html-webpack-plugin -D
npm i less less-loader -D
npm i css-loader style-loader -D
运行webpack成功的话应该如下
image.png
可以看到整个项目的js文件，less文件都被打包到了一个html界面。非常nice吧，这就是构建工具，能理解webpack是干啥的了吗？
