Webpack

1.Loader

1. 在src下写一个index.css,index.css里写一个样式
2. 在src下的index.js配置，首先引入一个css文件，webpack不知道怎么打包
3. 在webpack.config.js里配置 css-loader style-loader进行打包

**css-loader:**会帮助我们分析出几个css文件之间的关系，最终把这些css文件合成一段css

style-loader:在得到css-loade生成的css内容后，style-loader会把这段内容挂载到head内容

• 还可以使用sass-loader

• 先安装：npm install sass-loader node-sass --save-dev

• 在webpack.config.js里配置好，就可以使用了

2.Plugins

安装

npm install html-webpack-plugin -D

安装好在webpack.config.js配置

const HtmlWebpackPlugin=require("html-webpack-plugin")

plugins:[new HtmlwebpackPlugin()]

配置好打包你会发现dist文件里自动帮我们打包了index.html,index.html里自动引入了js文件

**HtmlWebpackPlugin:**会在打包结束后，自动生成一个html文件，并把打包生成的js自动引入到这个html文件中

但是在HtmlWebpackPlugin这个打包生成的index.html里少了一个div为root的标签，怎么解决的？

1. 我们在webpack.config.js里的Plugins的数组里配置

   Plugins:[

   ​ new HtmlWebpackPlugins({

   ​ template:'src/index.html'

   })

   ]

2. 在src目录下创建一个index.html配置一个模板，加一个

   标签，弄好后打包会发现HtmlWebPackPlugins打包生成的html文件自动引入div标签

**Plugins:**可以在webpack运行到某个时刻的时候，帮你做一些事情

​ const cleanWebpackPlugin=require('clean-webpack-plugin')

​ 在Plugins:[new HtmlWebpackPlugins({

​ template:'src/index.html'

​ }),new Clean WebpackPlugins(['dist'])]

3. dist 表示的是我们在打包之前，会使用CleanWebpackPlugin插件帮我们删除dist文件的所有内容

**CleanWebpackPlugin:**打包之前

**HtmlWebpackPlugin:**打包之后

3.图片篇

打包的图片名称会变，还很长一段，如果想打包前的图片名称和打包后的图片名称不变怎么解决？

1. 打开webpack.config,js文件配置

   module:{

   ​ rules:[{

   ​ test:/.jpg$/.

   ​ use:{

   ​ loader:'file-loader',

   ​ options:{

   ​ name:'[name].[text]', //我新打包出来的名字是我旧的名字和后缀名

   ​ outputPath:'images/',//打包到生成/images的文件夹里

   ​ limit:2048 //如果图片超过2048，就会file-loader打包一个图片文件，小于的话就会打包到bundle.js文件里，不会单独生成一个文件夹

   ​ }

   ​ }

   ​ }]

   }

2. 配置好打包就会改变了

3. url-loader

4. npm install url-loader --save-dev

5. url-loader打包会把你的图片放在bundle.js文件里，不会单独生成一个文件夹

**url-loader缺点：**如果这个js文件特别大，打包生成的文件也很大，那么加载js时间很长

4.Loader作用：

1. webpack不能识别非js结尾的后缀的模块，在webpack.config.js里的module配置file-loader,就能识别jpg这样的文件了

5.webpack核心概念：

1. entry:(入口)
2. output:(输出)
3. loader
4. Plugins(插件)

​