1、webpack使用基本
- 首先需要 全局安装 官网都有 这里就不多说了
npm install webpack -g// 需要4.0再装个clinpm install --save-dev webpack-cli复制代码
2.创建个项目
// 初始化npm init -y// 需要有个 webpack.config.js复制代码
// 然后里面// main.js 入口文件const path = require('path')module.exports = { entry: path.join(__dirname , './src/main.js'), // 入口 表示要使用webpack打包哪个文件 output: { path: path.join(__dirname, './dist'), // 指定打包好的文件输出到哪里 filename: 'bundle.js' // 指定输出文件的名称 }, externals: { // 不编译某些模块 可引入cdn jquery: 'jQuery' }}复制代码 2、实现实时编译更新功能
（1） 直接在 package.json中一句话
// 首先需要安装 webpack-dev-server 插件,但是只安装这个不行，因为它依赖 webpack这个插件所以npm install webpack-dev-server -Dnpm install webpack -Dnpm install webpack-cli -D // 4.0版本需要在安装这个cli 否则报错复制代码
在 package.json 中配置
// 实现热更新 和更改端口"dev": "webpack-dev-server --open --port 3000 --hot"复制代码
（2）第二种方式麻烦
"dev": "webpack-dev-server"// 首先在 webpack.config.js 中配置devserver如下图复制代码
3、html-webpack-plugin 的使用
- 先安装
npm install html-webpack-plugin -D复制代码
2、导入在webpack.config.js 里
4、处理 css文件的 loader 文件 style-loader css-loader
- 先安装
// 首先安装npm install style-loader css-loader -D复制代码
2、在webpack.config.js 里配置
module对象身上有个 rules属性，这个rules属性是个数组，存放了所有第三方文件的匹配和处理规则
这些loader调用规则从右到左 即 css-loader -> style-loader
5、处理 less文件 less-loader
1、先安装
npm install less-loader -Dnpm install less -D复制代码
2、在webpack.config.js 里配置
这些loader调用规则从右到左 即 less-loader ->css-loader -> style-loader
6、处理 scss文件 scss-loader
1、先安装
npm install sass-loader -Dnpm install node-sass -D复制代码
2、在webpack.config.js 里配置
这些loader调用规则从右到左 即 sass-loader ->css-loader -> style-loader
7、处理图片 的loader url-loader file-loader
1、先安装
npm install url-loader file-loader -D复制代码
2、在webpack.config.js 里配置
3、图片会被转为base64 如何不转呢？ 上面的 30是 30字节，
给传参 limit值，如果图片小于limit值，会被转为base64，如果>=则不会转为base64
8、处理字体文件的
9、重要的 es6+ => es5 bable-loader
1、先安装
npm insatll babel-core -Dnpm install babel-loader -D// 注释 babel-loader@71.15 8.0版本报错npm install babel-preset-es2015 -D复制代码
2、建立.babelrc 文件
3、在webpack.config.js 里配置