1、webpack使用基本
- 首先需要 全局安装 官网都有 这里就不多说了
npm install webpack -g
// 需要4.0再装个cli
npm 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 -D
npm install webpack -D
npm 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 -D
npm install less -D复制代码2、在webpack.config.js 里配置
这些loader调用规则从右到左 即 less-loader ->css-loader -> style-loader
6、处理 scss文件 scss-loader
1、先安装
npm install sass-loader -D
npm 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 -D
npm install babel-loader -D
// 注释 babel-loader@71.15 8.0版本报错
npm install babel-preset-es2015 -D复制代码2、建立.babelrc 文件
3、在webpack.config.js 里配置