众所周知webpack是一款打包项目的打包工具
本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。
安装webpack之前请确保你已安装了node.js
如果没有安装请点击下载安装:官网下载安装地址
webpack四个核心概念：
- 入口entry
- 出口output
- loader
- 插件plugins
全局安装webpack
npm install --global webpack
//npm install --global webpack@<version> #指定安装的版本
npm install --global webpack-cli局部安装webpack
npm install --save-dev webpack
//npm install --save-dev webpack@<version> #指定安装的版本
npm install --save-dev webpack-cli
可使用命令 webpack -v 查看是否安装成功
首先创建一个demo文件夹 名称为webpack-demo
mkdir webpack-demo
cd webpack-demo生成package.json
npm init -y创建一个src/index.js目录和文件输入
mkdir src
cd src
touch index.jsindex.js
console.log("hello webpack");运行命令 webpack 你就会看到项目下面多了一个dist/main.js的文件夹 main.js就是你打包后的index.js文件结果，在这里就涉及到webpack打包的默认入口和出口 默认打包入口是src/index.js 默认打包出口是dist/main.js
webpcak 默认打包是生产环境production打包后代码为一行 也可以设置为开发环境development多行代码显示，执行下面命令可切换不同的环境进行打包
webpack --model production //生产环境 压缩后 一行代码显示
webpack --model development //开发环境 未压缩 多行代码显示
webpack本身是用来打包js的，但是如果想要打包js，css，html，图片等 就必须配置webpack
loader 让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块，然后你就可以利用 webpack 的打包能力，对它们进行处理。
插件plugins 可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量。插件接口功能极其强大，可以用来处理各种各样的任务
webpack常用的相关的配置如下:
首先我们得在webpack-demo目录下创建配置文件 webpack.config.js
const path = require('path');
//配置入口和出口的两种方式
module.exports = {
entry: './src/index.js', // 入口配置
output: { // 出口配置
filename: 'main.js',
path: path.resolve(__dirname, 'dist')
}
};启动脚本配置 package.json
{
"name": "webpack_demo",
"version": "1.0.0",
"description": "",
"private": true,
"scripts": {
"prd": "webpack --model production", //生产环境 npm run prd
"dev": "webpack --model development" //开发环境 npm run dev
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^4.43.0",
"webpack-cli": "^3.3.11"
}
}本地服务器配置 dev-serve
- 安装
npm install --save-dev webpack-dev-server安装完成配置webpack.config.js 添加如下配置:
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist')
},
devServer:{
//本地服务路径
contentBase:"./dist",
//实时刷新
inline:true
}
};配置启动脚本package.json 新增如下脚本命令
"scripts": {
"start": "webpack --model production",
"dev": "webpack --model development",
"devServe":"webpack-dev-server --open --inline"
},运行脚本 npm run devServe 打开localhost:8080 就能看到服务指向的地址
在webpack-demo/dist中新建一个index.html,引入main.js代码如下
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title></title>
<meta charset="UTF-8">
<script src="./main.js"></script>
</head>
<body>
</body>
<script type="text/javascript">
</script>
</html>刷新浏览器 按F12 点击console 就能看见index.js中打印的数值如下所示,接下来我们的devServe实时刷新页面就配置好了。当你改变index.js文件时保存后webpack会自动帮你打包文件，就不用手动去执行webpack打包命令了
当然devServer还有很多配置，详情请参考官方文档https://www.webpackjs.com/configuration/dev-server/
接下来咱们配置loader 如果需要打包html css 图片等就需要配置loader，webpack默认是只打包js的
在src中新建css文件 目录结构webpack-demo/src/index.css ,添加如下样式
body{
background: blue
}接着在index.js文件中引入index.css
import './index.css';
console.log("hello webpack");当你保存文件时，因为配置了本地服务devServer实时刷新，webpack会自动编译保存的文件。此时浏览器则会报错告诉你index.css文件并不能识别。需要安装loader来处理此文件类型。
当你需要打包什么文件则需要安装什么loader下面附上一张文件类型对应需要安装的loader，下面表来自https://blog.csdn.net/xuelang532777032/article/details/65445604博主
loader安装方法就不在一一举例，请参考官方文档 https://www.webpackjs.com/loaders/
约定loader一览表
| 扩展名 | 语义 | loader举例 |
|---|---|---|
| .js | returns module exports | babel-loader |
| .ts | returns module exports | ts-loader |
| .coffee | returns module exports | coffee-loader coffee-redux-loader |
| .jsx | returns module exports (react component) | jsx-loader react-hot-loader!jsx-loader |
| .json .json5 | returns json value | json-loader json5-loader |
| .txt | return string value | raw-loader |
| .css | returns nothing, side effect of adding style to DOM | style-loader!css-loader style-loader!css-loader!autoprefixer-loader |
| .less | returns nothing, side effect of adding style to DOM | style-loader!css-loader!less-loader |
| .scss | returns nothing, side effect of adding style to DOM | style-loader!css-loader!scss-loader |
| .styl | returns nothing, side effect of adding style to DOM | style-loader!css-loader!stylus-loader |
| .png .jpg .jpeg .gif .svg | returns url to image | file-loader url-loader |
| .woff .ttf | returns url to font | file-loader url-loader |
| .wav .mp3 | returns url to audio | file-loader url-loader |
| .mpeg .mp4 .webm .ogv | returns url to video | file-loader |
| .html | returns HTML as string | html-loader |
| .md .markdown | returns HTML as string | html-loader!markdown-loader |
| .jade | returns template function | jade-loader |
| .hbs .handlebars | returns template function | handlebars-loader |
接下来。咱们开始安装css文件需要的loader也就是表所对应的style-loader css-loader
css文件的 loader安装
npm install style-loader css-loader -S在webpack.config.js配置loader
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist')
},
devServer:{
//本地服务路劲
contentBase:"./dist",
//实时刷新
inline:true
},
module: {
rules: [
{
//正则表达式找到.css结尾的文件
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]
}
]
}
};然后重新运行本地服务npm run devServe 打开浏览器 http://localhost:8080,你设置的样式就已经加载出来了。
图片 html等文件打包对照以上表需要安装的的loader去官方文档查找安装配置
下面讲解插件pulgins的配置
安装插件pulgins 这里安装的是HtmlWebpackPlugin插件 需要什么插件可以对应官方文档可以找到插件的安装方法
https://www.webpackjs.com/plugins/html-webpack-plugin/
HtmlWebpackPlugin简化了HTML文件的创建，以便为你的webpack包提供服务。这对于在文件名中包含每次会随着编译而发生变化哈希的 webpack bundle 尤其有用。 你可以让插件为你生成一个HTML文件，使用lodash模板提供你自己的模板，或使用你自己的loader。
npm install --save-dev html-webpack-plugin配置webpack.config.js文件
var HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist')
},
devServer:{
//本地服务路劲
contentBase:"./dist",
//实时刷新
inline:true
},
module: {
rules: [
{
//正则表达式找到.css结尾的文件
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]
}
]
},
plugins: [new HtmlWebpackPlugin({
//指定html文件
template:"./src/index.html",
//打包后的名称
filename:"a.html",
//压缩
minify:{
removeAttributeQuotes:true,//去除多余的引号
removeComments:true,//去除注释
removeEmptyAttributes:true,//去除空属性
collapseWhitespace:true//去除空格回车
}
})]
};这里只是例举倒了一部分的配置参数，当然配置远远不止这些。还有很多配置详情。请参考官方文档提供的gitdemo；
这里附上HtmlWebpackPlugin插件配置地址: https://github.com/jantimon/html-webpack-plugin#configuration
下面是如何找到其它配置选项方法
开发环境配置:
/**
* 开发环境配置
*/
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'build')
},
// 开发环境配置
devServer:{
// 本地服务路径
contentBase:path.resolve(__dirname, 'build'),
// 压缩gzip
compress:true,
// 端口号
port:3000,
// 实时刷新
inline:true,
// 第一次运行时自动打开浏览器
open:true,
},
module: {
rules: [
{
// 正则表达式找到.css结尾的文件
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]
},
{
test: /\.less$/,
use:[
'style-loader',
'css-loader',
'less-loader'
]
},
{
// 处理图片资源
test: /\.(jpg|png|gif)$/,
loader: 'url-loader',
options: {
// 如果图片小于8kb就使用Base64处理图片
limit: 8*1024,
name: '[hash:10].[ext]',
// 关闭es6模块化
esModule: false,
// 打包编译后创建一个imgs目录存储图片
outputPath: 'imgs'
}
},
{
// 处理html中img资源
test: /\.html$/,
loader: 'html-loader'
},
{
// 处理其他资源
exclude: /\.(html|js|css|less|jpg|png|gif)$/,
loader: 'file-loader',
options: {
name: '[hash:10].ext',
// 打包编译后创建一个media目录存储其他资源
outputPath: 'media'
}
}
]
},
plugins: [new HtmlWebpackPlugin({
//指定html文件
template:"./src/index.html",
//打包后的名称
filename:"a.html",
//压缩
minify:{
removeAttributeQuotes:true,//去除多余的引号
removeComments:true,//去除注释
removeEmptyAttributes:true,//去除空属性
collapseWhitespace:true//去除空格回车
}
})]
};
扫一扫
6247
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
