基础配置主要包括：
- webpack 基础配置安装
- webpack 打包后的配置
- html 插件
- 样式处理
- es6 语法处理
- js 语法处理
- 全局变量引入的问题
- 图片处理
- 打包文件分类
一、安装
webpack安装webpack
webpack-cliwebpack的脚手架工具
webpack-dev-serverwebpack本地运行服务，会自动打包保存内存中然后去运行项目
mac 上如果安装全局文件需要在安装命令前加sudo
安装基本模块：
先运行 npm init -y 生成 package.json 默认文件
在生成基础 package.json 文件，初始化的内容为：
{
"name": "study_webpack2",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
安装 webpack 相关模块
npm i webpack webpack-cli webpack-dev-server -D
此时的目录结构，只有红色框内的内容
运行 webpack
在 webpack 4.0 中打包默认找 src/index.js 作为默认的入口，可以在中断输入 webpack --mode development 运行进行打包。
打包后目录文件会增加一个 dist 文件夹
这里的mode 实际上就是 webpack中的两种环境，一个是开发环境：development，一个是生产环境：production
在生产环境中，打包后的文件会更小。
配置 webpack
比如运行自己的定义好的文件，在 src 中创建文件 main.js，并在最外层查创建一个 webpack.config.js 的文件。
目录结构如下:
基础配置目录结构
如果直接去运行
webpack --mode development需要配置一下 package.json 脚本：
修改 package.json 脚本
第一个命令 dev 是运行本地服务
第二个命令 build 打包项目
"build": "webpack --config webpack.config.js"
// build 名称可以自定义，最后使用 npm run build 的名称
// webpack 指的是本地 webpack 命令，运行指定配置文件， --config ；告诉配置文件的名称：webpack.config.js
之后在继续运行就可以顺利运行和打包：
npm run dev // 运行本地服务
npm run build // 打包项目
配置自定义打包路径
在 webpack.config.js 中添加配置：
let path = require("path") // node 自带的插件，访问指定路径
module.exports={
mode:"development", // 两种开发模式production development
entry:"./src/main.js", // 定义 webpack 运行入口文件
output:{ // // 定义 webpack 运行出口文件
filename:"index.js", //打包后的文件名称
path:path.resolve(__dirname,"dist") //打包的路径以及文件夹名称
}
}
配置好后，运行 npm run build,即可发现按照预设打包好的。
二、配置本地运行服务,更新内容自动更新
出入口自定义配置好了后，就需要运行本地项目，能够在浏览器上面跑起来。
module.exports={
devServer:{ // 配置运行服务，如果不配置则默认为 8080 端口
port:8020, // 定义自定义的端口
progress:true, // 打开进度条显示
contentBase:"./dist" // 运行此文件夹静态资源的所有文件
},
mode:"development", //production development
entry:"./src/main.js",
output:{
filename:"index.js",
path:path.resolve(__dirname,"dist")
},
}
现在运行 npm run dev 即可运行项目，在浏览器输入：localhost:8020 即可。
如果没有在 dist 目录中没有添加 index.html 文件的话，会把 dist 目录的文件显示出来。
三、添加 html 模版，打包自动添加 index.html 到打包好的文件夹
html-webpack-plugin自动把html添加到打包的文件目录下的一个插件
let path = require("path")
let HtmlWabpackPlugin= require("html-webpack-plugin") // 引入插件，所有插件均是一个类
module.exports={
devServer:{
port:8020,
progress:true,
contentBase:"./dist"
},
mode:"development", //production development
entry:"./src/main.js",
output:{
filename:"index.js",
path:path.resolve(__dirname,"dist")
},
plugins:[ // 插件可以包括多个插件，所以这里是一个数组
new HtmlWabpackPlugin({ // 实例化插件
template:'./index.html', // 实际上就是把 index.html 作为一个模板，这里配置要添加到打包文件中的模版
filename:"index.html", // 把整个模板添加过去，打包后名称
minify:{ // 配置压缩 html
removeAttributeQuotes:true, // 去除双引号
collapseWhitespace:true // 变成一行，折叠空行
}
hash:true //如果需要添加哈希，就会在打包后添加哈希戳
})
]
}
html 模板内容：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>webpack</title>
</head>
<body>
</body>
</html>
运行 npm run build ,打包后会自动添加引入脚本路径
打包后的目录结构
看一下打包后的
html
<!DOCTYPE html><html lang=en><head><meta charset=UTF-8><meta name=viewport content="width=device-width,initial-scale=1"><meta http-equiv=X-UA-Compatible content="ie=edge"><title>webpack</title></head><body><script type=text/javascript src=index.js></script></body></html>
这里的 html 就已经被压缩了，也变成了一行。也就是上面配置是成功的。
四、样式处理
项目目录内的文件，比如多个 css、html ，我们都可以叫它为模块，所以在 webpack 配置文件中添加模块配置项：
let path = require("path")
let HtmlWabpackPlugin= require("html-webpack-plugin")
module.exports={
devServer:{
port:8020,
progress:true,
contentBase:"./dist"
},
mode:"development", //production development
entry:"./src/main.js",
output:{
filename:"index.js",
path:path.resolve(__dirname,"dist")
},
plugins:[
new HtmlWabpackPlugin({
template:'./index.html',
filename:"index.html",
minify:{
removeAttributeQuotes:true,
collapseWhitespace:true
}
})
],
module:{ // 添加模块配置 比如sass less stylus
rules:[ // 添加模块的配置规则
{
test:/\.css$/,
use:['css-loader']
}
]
}
}
这里的知识点是：
loader，loader的特点就是单一，一个loader只处理一件事情
多个loader的时候需要一个数组[]
loader的执行顺序默认是从右向左执行，还有从下往上执行。
css-loader主要用来解析@import这种语法的
style-loader主要把css插入到head的标签中
网友评论