webpack起步学习
安装webpack
- 创建一个index.html文件
- 注意emmet的小技巧 例如: li*10{这是第$个标签}
- 创建一个main.js文件,操作html中的li使其隔行变色
- js文件中用到了jquery,所以npm i jquery -s安装一下jquery
- 由于main.js包含了es6的高级语法,浏览器不认识import语法,所以需要用webpack处理一下
- webpack ./main.js -o ./dist/bundle.js
- 注意新版webpack的语法和旧版的区别 -o
- 这样处理过后的main.js文件就变成了dist文件夹内的bundle.js
用webpack处理了包含高级语法的main.js,接下来怎么运行项目呢??
- 依旧利用传统方式,用script标签把bundle.js引入index.html中
- 再次运行index.html标签即可
但是每次修改了文件之后,都要重新运行 webpack ./main.js -o ./dist/bundle.js 来重新打包编译为bundle.js文件才可以
怎样再简化一点呢???
- 创建一个 webpack.config.js 文件,来对 webpack 进行配置一下
- 在 webpack 配置文件内配置好 webpack 打包的入口 entry 和 出口文件 output 的路径和名字
- 这样每次只要运行 webpack 命令就可以实现文件的打包编译
但是这样依旧很麻烦,每次依旧要手动打包编译,如何实现自动化呢?
- 安装 webpack-dev-server
- cnpm i wbpack-dev-server --save-dev
- 在 package.json 文件内 的 scripts 内添加一个 dev 节点,并进行如下配置
- "dev": "webpack-dev-server",
- 这样在控制台输入 npm run dev 就可以运行起来 webpack-dev-server 实现自动化打包
- 要注意 webpack-dev-server 自动打包生成的 bundle.js 文件存放在内存中,而不是在磁盘上
- 所以 dist 文件夹内并没有 bundle.js 而是不可见的
那么为什么要将文件放到内存中而不是磁盘呢???
- 由于需要实时打包编译,放在内存中速度较快
那么怎么使用内存中的 bundle.js 文件呢???
- 在 index.html 中,将 src 改为 ../bundle.js , 也就是根目录下
- 另外注意运行 index.html 的方式,webpack-dev-server 把项目运行到了 localhost:8080
- 在浏览器输入这个地址,就会进入文件夹,在里面点击 index.html 即可
当然,对于 webpack-dev-server 还可以进行一些详细的配置
- "dev": "webpack-dev-server --contentBase src"
- 这样打开 localhost: 8080 会直接进入 src 文件夹,也就是会运行 index.html 文件
但是这样配置 index.html 文件很麻烦,有没有设么工具可以更简单的做这件事呢?
html-webpack-plugin 这个插件是帮助 webpack 来配置和处理 .html 文件的
注意 webpack 默认只能处理 js 文件
- 安装 npm i html-webpack-plugin --save-dev
- 同时在 webpack.config.js 文件内进行配置
- var htmlWebpackPlugin = require('html-webpack-plugin')
- 添加一个plugin节点,进行配置
- 注释掉 index.html 中的 script 节点,因为 html-webpack-plugin 会自动把生成的 bundle.js 注入到里面
webpack-dev-server 的一些其他配置,有两种方式进行配置:
方式一:
- "dev": "webpack-dev-server --hot -port 4321 --open"
作用是 启动热更新 指定端口为 4321 自动打开浏览器
方式二:
- 在 webpack.config.js 中进行配置
var webpack = require('webpack')...........................
我们知道 webpack 默认只支持 js 文件,那么怎么让 webpack 处理 css 文件呢???
注意注意注意:匹配规则例如 /\.css$/,中间一个空格都不准多加!!!!!!!!!!!
- cnpm i style-loader css-loader --save-dev
- 同样, 需要对这两个插件进行配置
同理,如何让 webpack 支持 less 文件
- cnpm i less-loader less --save-dev
- 再次配置
接下来,让 webpack 支持 sass 文件
- cnpm i sass-loader sass-node --save-dev
- 配置
- 要注意, scss 和 sass !!!!!!!!!!!!!!!!!
对了,新建的 css 文件要怎么使用呢???
- 在 main.js 文件内 import 一下
此外,我们知道写 css 的时候,很多时候也会用到一些 图片文件 和 字体文件 的路径 ,这些路径我们依旧要去配置哦
例如处理图片路径
- cnpm i url-loader file-loader --save-dev
{ /.(png|jpg|gif)$/, use: 'url-loader' }
注意,默认是对图片进行 base64 编码处理的,这个处理过程也是可控的
{ /.(png|jpg|gif)$/, use: 'url-loader?limit=70000' } 问号传参,临界值
浏览器不认识es的高级语法,而 webpack 也只能处理一部分,那么需要处理 es 的高级语法怎么办呢???
babel 可以帮我们处理 js 文件,把 es 的高级语法转换为低级语法
- 安装 babel 的相关 load 包
- 安装 babel 转换的语法
- 在 webpack.config.js 中进行相关配置
- 在根目录下创建一个 .babelrc 文件,并和 babel 的相关插件和包进行配置