Webpack 基础配置使用-简单学习笔记01

webpack起步学习

安装webpack

1. 创建一个index.html文件

• 注意emmet的小技巧 例如： li*10{这是第$个标签}

1. 创建一个main.js文件，操作html中的li使其隔行变色

• js文件中用到了jquery，所以npm i jquery -s安装一下jquery

1. 由于main.js包含了es6的高级语法，浏览器不认识import语法，所以需要用webpack处理一下

• webpack ./main.js -o ./dist/bundle.js
• 注意新版webpack的语法和旧版的区别 -o
• 这样处理过后的main.js文件就变成了dist文件夹内的bundle.js

用webpack处理了包含高级语法的main.js，接下来怎么运行项目呢？？

1. 依旧利用传统方式，用script标签把bundle.js引入index.html中
2. 再次运行index.html标签即可

但是每次修改了文件之后，都要重新运行 webpack ./main.js -o ./dist/bundle.js 来重新打包编译为bundle.js文件才可以

怎样再简化一点呢？？？

1. 创建一个 webpack.config.js 文件，来对 webpack 进行配置一下
2. 在 webpack 配置文件内配置好 webpack 打包的入口 entry 和 出口文件 output 的路径和名字
3. 这样每次只要运行 webpack 命令就可以实现文件的打包编译

但是这样依旧很麻烦，每次依旧要手动打包编译，如何实现自动化呢？

1. 安装 webpack-dev-server

• cnpm i wbpack-dev-server --save-dev

1. 在 package.json 文件内 的 scripts 内添加一个 dev 节点，并进行如下配置

• "dev": "webpack-dev-server",

1. 这样在控制台输入 npm run dev 就可以运行起来 webpack-dev-server 实现自动化打包
2. 要注意 webpack-dev-server 自动打包生成的 bundle.js 文件存放在内存中，而不是在磁盘上
3. 所以 dist 文件夹内并没有 bundle.js 而是不可见的

那么为什么要将文件放到内存中而不是磁盘呢？？？

1. 由于需要实时打包编译，放在内存中速度较快

那么怎么使用内存中的 bundle.js 文件呢？？？

1. 在 index.html 中，将 src 改为 ../bundle.js , 也就是根目录下
2. 另外注意运行 index.html 的方式，webpack-dev-server 把项目运行到了 localhost:8080
3. 在浏览器输入这个地址，就会进入文件夹，在里面点击 index.html 即可

当然，对于 webpack-dev-server 还可以进行一些详细的配置

1. "dev": "webpack-dev-server --contentBase src"
2. 这样打开 localhost: 8080 会直接进入 src 文件夹，也就是会运行 index.html 文件

但是这样配置 index.html 文件很麻烦，有没有设么工具可以更简单的做这件事呢？

html-webpack-plugin 这个插件是帮助 webpack 来配置和处理 .html 文件的

注意 webpack 默认只能处理 js 文件

1. 安装 npm i html-webpack-plugin --save-dev
2. 同时在 webpack.config.js 文件内进行配置

• var htmlWebpackPlugin = require('html-webpack-plugin')
• 添加一个plugin节点，进行配置

1. 注释掉 index.html 中的 script 节点，因为 html-webpack-plugin 会自动把生成的 bundle.js 注入到里面

webpack-dev-server 的一些其他配置，有两种方式进行配置：

方式一：

1. "dev": "webpack-dev-server --hot -port 4321 --open"

2. 作用是 启动热更新 指定端口为 4321 自动打开浏览器

   方式二：

3. 在 webpack.config.js 中进行配置

4. var webpack = require('webpack')...........................

我们知道 webpack 默认只支持 js 文件，那么怎么让 webpack 处理 css 文件呢？？？

注意注意注意：匹配规则例如 /\.css$/,中间一个空格都不准多加！！！！！！！！！！！

1. cnpm i style-loader css-loader --save-dev
2. 同样, 需要对这两个插件进行配置

同理，如何让 webpack 支持 less 文件

1. cnpm i less-loader less --save-dev
2. 再次配置

接下来，让 webpack 支持 sass 文件

1. cnpm i sass-loader sass-node --save-dev
2. 配置
3. 要注意， scss 和 sass ！！！！！！！！！！！！！！！！！

对了，新建的 css 文件要怎么使用呢？？？

1. 在 main.js 文件内 import 一下

此外，我们知道写 css 的时候，很多时候也会用到一些 图片文件 和 字体文件 的路径 ，这些路径我们依旧要去配置哦

例如处理图片路径

1. cnpm i url-loader file-loader --save-dev

2. { /.(png|jpg|gif)$/, use: 'url-loader' }

   注意，默认是对图片进行 base64 编码处理的，这个处理过程也是可控的

3. { /.(png|jpg|gif)$/, use: 'url-loader?limit=70000' } 问号传参，临界值

浏览器不认识es的高级语法，而 webpack 也只能处理一部分，那么需要处理 es 的高级语法怎么办呢？？？

babel 可以帮我们处理 js 文件，把 es 的高级语法转换为低级语法

1. 安装 babel 的相关 load 包
2. 安装 babel 转换的语法
3. 在 webpack.config.js 中进行相关配置
4. 在根目录下创建一个 .babelrc 文件，并和 babel 的相关插件和包进行配置