webpack是一款打包工具。通过依赖关系，把项目中所有的资源，图片，样式表进行模块化打包，分隔成静态资源js,css,png,jpg。通过入口与出口配置把所有项目文件打包编译形成一个bundle.js文件。 详情请看官网的图片：https://www.webpackjs.com
webpack 4.0版本以上与3.x版本作用有细微差别，我们不需要手动配置入口与出口文件，但是它需要安装一个webpack-cli插件
1.初始化项目
webpack 是基于node创建的，所以在进行webpack项目时，必须要先安装node，才能运行webpack
在文件夹中创建一个项目，进入这个项目中
-D是开发依赖 -S是生产依赖 -g全局环境下安装
- 初始化项目
npm init -y
- 安装webpack
yarn add webpack -D
- 安装webpack脚手架
yarn webpack-cli -D
- 在项目根目录下创建一个src文件夹，这是存放项目的源文件。
- 在项目根目录下创建一个dist文件夹，这是存放项目打包编译的bundle.js文件
整个项目结构如下
│ yarn.lock
│ package.json ---打包文件
│ webpack.config.js ---打包配置文件
│
├─dist
│ main.js -- 打包编译后自动生成的出口文件
├─node_modules ---npm安装模块
│
├─src
│ │ index.js ---项目入口文件
2.接下来就是配置配置文件 了,webpack.config.js
const webpack = require('webpack'); // 用于访问内置插件
module.exports = {// 向外暴露一个配置对象
// mode 有2个参数 development production
// 生产环境，还是开发环境
// 若是生产环境，webpack自动压缩js文件
mode:"development",
// entry 在4.x版本中，约定大于配置，约定默认的
// 默认打包入口路径是./src/index.js
// 默认打包的出口路径是 ./dist/main.js
}
3.运行webpack命令
命令行里直接输入 webpack 然后回车
dist文件夹里自动生成一个main.js文件
4.自动打包 webpack-dev-server
yarn add webpack-dev-server -D
安装完之后，webpackage.json 也要添加些数据
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
// 添加个dev配置信息即可
// port 端口号
// host 可更改端口名loacalhost 为 127.0.0.1
// progress 加载进度 一般没用
"dev" : "webpack-dev-server --open --port 3030 --host --progress"
}
webpack 在根目录下生成了一个看不见的main.js文件，它被托管在内存中。 所以在引入js时，要写根目录下的main.js
启动服务，自动打包 输入命令 npm run dev
当服务启动后，文件自动在浏览器中打开
5.插件plugins
加载yarn add html-webpack-plugin可以让首页托管在内存中，加快页面打开速度，同时自动引入script标签
配置webpack.config.js文件
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
// 配置htmlplugin插件
const htmlplugin = new HtmlWebpackPlugin({
template: path.join(__dirname,'./src/index.html'),// 源文件位置
filename: 'index.html' // 内存中生成的html文件名
})
module.exports = {
mode:"development",
plugins:[
htmlplugin
]
}
6.第三方插件 loader 配置
webpack只是打包工具，要处理js,css文件，只能加载匹配的第三方工具来处理。
例如，你可以使用 loader 告诉 webpack 加载 CSS 文件，或者将 TypeScript 转为 JavaScript。为此，首先安装相对应的 loader：
- 1.css
yarn add style-loader css-loader -D
然后指示 webpack 对每个 .css 使用 css-loader
test 匹配对应的文件 use用哪个工具来处理 从右到左查找
module.exports = {
module: {
rules: [
{ test: /\.css$/, use:['style-loader' , 'css-loader' ] }
]
}
};
- 2.less , sass
yarn add less less-loader -D
yarn add sass-loader node-sass -D
然后指示 webpack 对每个 .less / .scss 使用 less-loader / sass-loader
module.exports = {
module: {
rules: [
{ test: /\.css$/, use:['style-loader' , 'css-loader' ] },
{ test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
{ test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] }
]
}
};
针对普通css样式可以启动模块化，使用？传参
'css-loader?modules '自动启动模块化
{ test: /\.css$/, use: ['style-loader', 'css-loader?modules&localIdentName=[path][name]-[local]-[hash:5]'] }
localIdentName 模块化后的class类名
path路径
name文件名
local模块化后的类名
css模块化只针对类选择器与id选择器生效 不会对标签选择器起作用
- 3.url 处理图片
yarn add url-loader -D
对应的配置文件
{ test: /\.(png|jpg|jpeg|gif|bmp)$/, use: 'url-loader'}
图片配置参数
limit 给定的值，若是加载的图片大于或等于这个值，就不会被转为base64
若是引进不同路径而相同的名字的图片，在做loader处理后，后面的图片就会覆盖前面的图片。
可以用hash值来区分： 2545-banner.png 6452-banner.png
hash：5表示5位hash值 后面跟的数字是几就是几位hash值
name 图片名字 ext后缀名
{ test: /\.(png|jpg|jpeg|gif|bmp)$/, use:'url-loader?limit=8000&[hash:4]-[name].[ext]'}
- 4.处理字体文件 也是用
url-loader
{ test: /\.(ttf|eot|svg|woff|woff2)$/, use: 'url-loader' }
- 5.高级语法转为低级语法 babel
代码中一些es6,es7需要babel进行转译，才能运行
注：yarn安装对网络环境要求高，可以换cnpm安装。
babel更新了几处地方需注意：https://www.jianshu.com/p/e21d19875fbb
（1）首先安装两套插件
yarn add @babel/core babel-loader @babel/plugin-transform-runtime -D
yarn add @babel/preset-env -D
第一套插件是转换器
第二套插件是语法包
（2）下载完以上插件，接着配置config文件
在modes下再添加一项规则
enclude是排除的意思，排除node_modules中的js文件。
一定要加上这个，不然node_modules里的文件太大，特别影响js文件的打包速度
{ test: /\.js$/, use: 'babel-loader',exclude:/node_modules/ }
（3）最后在根目录建一个.babelrc文件
注：创建这个文件需要在你所使用的代码软件中创建，直接在文件夹中创建，计算机不允许
它是一个json风格的文件，不允许写注释
{
"presets":["@babel/env"],
"plugins":["@babel/plugin-transform-runtime"]
}