webpack 从零开始
简介： webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。当 webpack 处理应用程序时，它会在内部从一个或多个入口点构建一个 依赖图(dependency graph)，然后将你项目中所需的每一个模块组合成一个或多个 bundles，它们均为静态资源，用于展示你的内容。
本文有一个错误，没有生成package.lock.json文件，不能卸载包~
一、核心概念
webpack 有五个核心概念
-
入口（entry）
入口起点(entry point) 指示 webpack 应该使用哪个模块，来作为构建其内部 依赖图(dependency graph) 的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。
module.exports = {
entry: './path/to/my/entry/file.js',
};
- 出口（output）
output 属性告诉 webpack 在哪里输出它所创建的 bundle，以及如何命名这些文件。主要输出文件的默认值是 ./dist/main.js，其他生成文件默认放置在 ./dist 文件夹中。
const path = require('path');
module.exports = {
entry: './path/to/my/entry/file.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'my-first-webpack.bundle.js',
},
};
-
loader
webpack 只能理解 JavaScript 和 JSON 文件，这是 webpack 开箱可用的自带能力。loader 让 webpack 能够去处理其他类型的文件，并将它们转换为有效 模块，以供应用程序使用，以及被添加到依赖图中。
const path = require('path');
module.exports = {
output: {
filename: 'my-first-webpack.bundle.js',
},
module: {
rules: [{ test: /\.txt$/, use: 'raw-loader' }],
},
};
- 插件（plugin）
loader 用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。包括：打包优化，资源管理，注入环境变量。
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack'); // 用于访问内置插件
module.exports = {
module: {
rules: [{ test: /\.txt$/, use: 'raw-loader' }],
},
plugins: [new HtmlWebpackPlugin({ template: './src/index.html' })],
};
-
模式mode
通过选择 development, production 或 none 之中的一个，来设置 mode 参数，你可以启用 webpack 内置在相应环境下的优化。其默认值为 production。
module.exports = {
mode: 'production',
};
二、 安装
使用npm 进行安装
mkdir webpack-begin
cd webpack-begin
npm init
cnpm install webpack webpack-cli --save-dev
查看一下package.json 当前webpack 版本为 5.74 webpck-cli 4.10
创建一个文件夹放源码，一个放输出
mkdir src
mkdir dist
src中创建 index.js 文件作为源文件
dist 中创建index.html
webpack-begin根目录下创建配置文件 webpack.config.js
当前项目文件结构如下
webpack-begin
-node_modules
-dist
-index.html
-src
-index.js
-package.json
-webpack.config.js
在index.js里写一个Hello world
(function(){
const el = document.createElement('div')
el.innerHTML = "Hello world!"
document.body.appendChild(el)
})()
index.html 写一个空的html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Webpack begin</title>
</head>
<body>
<script src="./main.js"></script>
</body>
</html>
webpack.config.js写上配置文件
const path = require('path')
module.exports = {
entry: "./src/index.js",
output: {
filename: "main.js",
path: path.resolve(__dirname,'dist') //__dirname 指向项目根目录
},
module: {
},
mode: "development"
}
修改package.json：scripts里加一个build
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack"
},
运行一下：
npm run build
dist目录下生成了一个main.js 文件
index.html 引入
<body>
<script src="./main.js"></script>
</body>
浏览器打开index.html 看到Hello world!
ok 安装成功
三、管理资源
管理资源使用loader解析 css,scss,vue，图片等问件
在 src 下创建一个index.css文件，随便写点能用的样式
div{
background-color: #ff6700;
}
./src/index.js
import './index.js'
npm run build 运行一下 报错
you need appropriate loader to handle this file type-你需要一个合适的loader解析这个文件
安装 style-loader css-loader 解析文件
cnpm install style-loader css-loader --save-dev
配置loader
output: {
...
},
module: {
rules: [
{
test: /\.css$/i,
use: ['style-loader','css-loader']
}
]
},
npm run build 一下
查看index.html 出现了橙色的背景 ok css文件加载成功
接下来添加一个sass
src下创建一个`index.scss,随便写点看的见得样式
div{
color: #fff;
}
安装sass 和 sass-loader
cnpm install node-sass sass-loader --save-dev
修改配置文件
rules: [
{
test: /\.css$/i,
use: ['style-loader','css-loader']
},
{
test: /\.scss$/i,
use: ['style-loader','css-loader','sass-loader']
}
index.js引入 index.scss
import './index.scss'
npm run build 浏览器查看 index.html 文字颜色变白 ok sass 安装成功
ok 再接再历 装一个 vue
cnpm install vue --save
cnpm install vue-loader --save-dev
src 下创建App.vue 文件
创建 components 文件夹存放组件 创建一个组件HelloWrold
HelloWorld.vue:
<template>
<div>
<h1>Hello world!</h1>
</div>
</template>
<script>
export default {
}
</script>
<style>
</style>
App.vue:
<template>
<div>
<hello-world></hello-world>
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld'
export default {
components: {
HelloWorld
}
}
</script>
<style>
</style>
修改 index.js
import App from './App.vue'
import { createApp } from 'vue'
createApp(App)
.mount("#app")
修改webpak配置文件
rules:[
...
test: /\.vue$/i,
use: ['vue-loader']
]
npmr run build 不出意外的话报错了
vue-loader was used without the corresponding plugin VueLoaderPlugin
缺个插件，百度了一下,webpack添加一个插件
//webpak.config.js
coonst {VueLoaderPlugin} = require( 'vue-loader')
mdules: {
...
}
plugins:[
new VueLoaderPlugin()
]
浏览器查看一下 index.html ok 看到一个Hello world vue安装成功了
当然完整的开发环境不止这些 继续学习webpack
本章完 --休息一下
1073
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
