# 什么是webpack
Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。
# 安装webpack
全局安装,指定版本号,这里使用的是3.6.0,注意4.0版本部分使用命令有所不同
```cmd
npm install webpack@3.6.0 -g
```
局部安装
```cmd
npm install webpack@3.6.0 --save-dev
```
卸载
```cmd
npm uninstall webpack -g
```
# 打包命令
```cmd
#webpack 源地址 目标地址
webpack ./src/main.js ./dist/bundle.js
```
打包完成后会在目标目录下生成打包后的文件
# 使用打包后的文件
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--引入打包后的js文件-->
<script src="dist/bundle.js"></script>
</body>
</html>
```
# 模块化导入和导出
# 模块化规范
## 浏览器端的模块化
1…AMD(Asynchronous Module Definition,异步模块定义)
代表产品为：Require.js
2…CMD(Common Module Definition,通用模块定义)
代表产品为：Sea.js
## 服务器端的模块化CommonJS
服务器端的模块化规范是使用 CommonJS 规范：
使用 require 引入其他模块或者包
使用 exports 或者 module.exports 导出模块成员
一个文件就是一个模块，都拥有独立的作用域
## ES6模块化
ES6模块化规范中定义：
每一个 js 文件都是独立的模块
导入模块成员使用 import 关键字
暴露模块成员使用 export 关键字
**注意：** 在一个模块中，只允许使用export default向外默认暴露一次成员，千万不要写多个export default，否则会报错
### 默认导出
```JavaScript
let num = 10;
let name = '张三;
function show() {
console.log('1111111111111')
}
//属性名和属性值一样，可以只写一个
export default {
num,
name,
show
}
```
### 默认导入
```JavaScript
import m1 from './test.js'
```
### 按需导出和导入
```JavaScript
export let num = 998;
export let myName = "jack";
export function fn = function() {
console.log("fn")
}
```
```JavaScript
import { num,fn as printFn ,myName } from "./test.js"
```
# webpack的配置
**我们建立好webpack的项目之后先要初始化s生成默认的package.json文件**
>在node开发中使用npm init会生成一个pakeage.json文件，这个文件主要是用来记录这个项目的详细信息的，它会将我们在项目开发中所要用到的包，以及项目的详细信息等记录在这个项目中。方便在以后的版本迭代和项目移植的时候会更加的方便。也是防止在后期的项目维护中误删除了一个包导致的项目不能够正常运行。使用npm init初始化项目还有一个好处就是在进行项目传递的时候不需要将项目依赖包一起发送给对方，对方在接受到你的项目之后再执行npm install就可以将项目依赖全部下载到项目里。话不多说我们就直接开始进行操作。
```cmd
npm init
```
***
**在根目录下创建webpack.config.js文件**
**配置文件内容** !!!`注意__dirname 是两个下划线避免踩坑`
```JavaScript
//path 模块提供了一些实用工具，用于处理文件和目录的路径。 可以使用以下方式访问它：
const path = requier("path");
module.exports={
entry: "./src/main.js", //入口文件模块路径
output:{
path: path.resolve(__dirname ,"dist"), //path.resolve() 方法会将路径或路径片段的序列解析为绝对路径__dirname是node内置变量
filename:"bundle.js" //输出文件名
}
}
```
配置完成后就可以直接使用webpack命令进行打包了,他会自动在我们的webpack.config.js中配置的路径和文件名生成最终打包文件
```cmd
webpack
```
## 打包命令的映射
>可以自定义命令映射脚本,比如我们现在配置完打包的默认路径和文件名之后可以直接使用webpack命令打包了,然后我们可以在 package.json文件中配置命令脚本映射
`为什么要配置命令映射:`配置了映射之后,执行`npm run build`命令,会优先寻找本地开发环境中的webpack命令,如果是终端直接输入webpack命令,是直接用的全局环境
```json
{
"name": "meetwebpack",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack" //以后可以使用npm run build来实现webpack命令
},
"author": "",
"license": "ISC"
}
```
**使用**
# loader
## 使用webpack打包css
`具体细节参考官方文档`[webpack官方文档](
https://www.webpackjs.com/loaders/css-loader/)
创建css文件,如新建文件./css/normal.css
```css
body{
background-color : red;
}
```
入口文件依赖css
```JavaScript
require("./css/normal.css")
```
### 安装所需loader
**安装所需loader,`注意版本`,版本与当前webpack版本不兼容会导致打包失败**
```cmd
npm install --save-dev style-loader //应用到DOM的loader
npm install --save-dev css-loader //加载css的loader
```
### 配置webpack.config.js
```json
//path 模块提供了一些实用工具，用于处理文件和目录的路径。 可以使用以下方式访问它：
const path = require("path");
module.exports={
entry: "./src/main.js",
output:{
path: path.resolve(__dirname ,"dist"),
filename:"bundle.js"
},
//添加module配置,匹配css文件,使用刚刚安装的loader,注意style-loader必须在前
module:{
rules:[
{
test: /\.css$/,
use: ['style-loader','css-loader' ]
}
]
}
}
```
打包测试:
```cmd
npm run build
```
测试样式成功渲染页面
## 使用webpack打包图片
`操作方式类似css,都是安装对应的loader然后打包即可,这里使用了url-loader和file-loader`
### url-loader和file-loader区别
url-loader有配置参数limit 8192,表示限制大小,低于8KB的文件将会被编译成base64的url字符串进行输出图片,如果被打包编译的图片超过limit限制的大小,需要安装file-loader,将会被打包成新的图片,并以MD5哈希值为文件名的图片,打包在dist目录中,此时可以在module中配置属性publicpath指定图片资源的url路径
```json
//path 模块提供了一些实用工具，用于处理文件和目录的路径。 可以使用以下方式访问它：
const path = require("path");
module.exports = {
entry: "./src/main.js",
output: {
path: path.resolve(__dirname, "dist"),
filename: "bundle.js",
publicPath:"dist/" //图片大于limit限制时配置此路径
},
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
test: /\.less$/,
use: [{
loader: "style-loader" // creates style nodes from JS strings
}, {
loader: "css-loader" // translates CSS into CommonJS
}, {
loader: "less-loader" // compiles Less to CSS
}]
},
{
test: /\.(png|jpg|gif|jpeg)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 20000 //限定文件大小单位byte
}
}
]
}
]
}
}
```
## ES6语法处理
## 安装babel-loader
```cmd
npm install --save-dev babel-loader@7.0.0 babel-core babel-preset-es2015
```
## webpack.config.js配置文件修改
```json
{
test: /\.js$/,
//排除node_modules包内的js转换
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['es2015']
}
}
}
```
webpack学习笔记
Copyright: 采用 知识共享署名4.0 国际许可协议进行许可
