webpack的使用方式

1.安装webpack

1.运行npm i webpack -g全局安装webpack，这样就能在全局使用webpack的命令

2.在项目根目录中运行npm i webpack -D 安装到项目依赖中

2.使用webpack实现隔行变色案例

1.运行npm init初始化项目，使用npm管理项目中的依赖包

2.创建项目基本的目录结构

3.使用npm i jquery -d安装jquery类库

4.创建main.js并书写各行变色的代码逻辑：

>import $ from 'jquery'

>$("#list li:odd").css("backgroundColor","pink");
>$("#list li:even").css("backgroundColor","yellow");

5.直接在页面上引用main.js会报错，因为浏览器不认识import这种高级的JS语法，需要使用webpack进行处理，webpack默认会把这种高级的语法转换为低级的浏览器能识别的语法

6.解决方法 （webpack4以上的解决方法）

1. 在项目的根目录下创建 webpack.config.js配置文件：

2. 由于运行webpack命令的时候，webpack需要指定入口文件和输出文件的路径，所以，我们需要在webpack.config.js中配置这两个路径：

   注意 ：入口文件的路径不要写错 如果不写配置输出文件名，默认为 main.js

// 导入处理路径的模块
   var path = require('path');

   // 导出一个配置对象，将来webpack在启动的时候，会默认来查找webpack.config.js，并读取这个文件中导出的配置对象，来进行打包处理
   module.exports = {
       entry: path.resolve(__dirname, 'src/js/main.js'), // 项目入口文件
       output: { // 配置输出选项
           path: path.resolve(__dirname, 'dist'), // 配置输出的路径
           filename: 'bundle.js' // 配置输出的文件名
       },
truetruetruedevServer: {}, //开发时服务器的配置
   }

7.终端执行 npm run dev在dist 目录下面就能看到打包之后的文件bundle.js

8.引入打包后的文件到页面时 要注意引入js的位置 一般都放在body标签之后

总结

终端执行 npm run dev时

1. webpack发现没有通过命令的方式指定入口和出口（webpack4 已经不允许通过命令单独打包文件）
2. 然后webpack就去项目的根目录找webpack.config.js的配置文件
3. 找到配置文件之后，webpack解析这个文件 解析完成之后就得到了配置文件中的配置对象
4. 拿到配置对象后，就拿到了配置对象中指定的，入口和出口，然后进行打包

3.实时打包

• Webpack 默认只支持 js文件打包，需要打包html文件则需要使用插件 在后面的一步 ;-)

1.安装webpack-dev-server 在终端里输入npm i webpack-dev-server -d 安装过程受到网速的影响 等待安装完成（￣︶￣）↗　

2.配置，页面打开时浏览器所需要的操作

方式一####

在package.json 的scripts 节点下添加"dev1": "webpack-dev-server --open --port 3000 --contentBase src"指令

• --open: 启动后自动打开浏览器窗口
• --port 3000: 修改服务器访问端口 指定3000
• --contentBase src: 指定挂载目录 src目录

方式二####

在package.json的scripts 节点下添加"dev1": "webpack-dev-server"指令

修改webpack.config.js文件 在devServer节点下

>devServer: {
   // --open --port 3000 --contentBase src
   open: true,// 自动打开浏览器
   port: 3000,// 设置服务器启动的端口
   contentBase: 'src',// 指定托管目录
>},

3.在终端里运行npm run dev1看到下图就运行成功了

注意：

• 想要停止监听 按下 ctrl键+c键

• 由于webpack-dev-server 将打包好的文件直接放在了内存中，所以在页面中引用的时候，将script的src属性设置为<script src="bundle.js"></script>
• 如果没有配置输出的文件名，将src的属性设置为<script src="main.js"></script>

4.使用html插件进行html文件打包

1. 在项目的根路径下 运行命令npm i html-webpack-plugin -d 等待安装完成

2. 在webpack.config.js中

   // 导入在内存生成的HTML页面的插件
   var html = require('html-webpack-plugin');

3. 添加plugins:[]

   plugins: [
       // 通过new 这个类来使用这个插件
       new html({
       // 用哪个html作为模板
       template: path.resolve(__dirname,'src/index.html'),
       filename: 'index.html'
   }),

4. 将index.html中script标签注释掉，因为html-webpack-plugin插件会自动把bundle.js注入到index.html页面中！

5. 启动npm run dev1 就ok了o(￣▽￣)o

5.使用webpack打包css

1. 在项目的根目录下 安装 命令 npm i style-loader css-loader -d

2. 在src目录下创建css目录，并创建index.css文件

3. 在main.js中添加 import './css/index.css' 其中的.表示main.js所在的当前目录

4. 修改 webpack.config.js文件

   // 如果要处理非JS类型的文件，需要手动安装一些合适的第三方loader加载器
   // 是通过 module 这个属性进行配置 
   module: { // 用来配置第三方的loader 模块
       rules: [ // 匹配的规则
           // use 表示使用哪些模块来处理test所匹配到的文件
           // use 中的相关loader模块的调用顺序是从后向前调用的
           {test:/\.css$/,use:['style-loader','css-loader']},
       ]
   }

6.使用Webpack 处理css中路径 url-loader

1. 在项目的根目录下安装 输入命令npm i url-loader -d

2. 要处理一些非js文件，需要手动安装一些第三方loader加载器，然后在webpack.config.js文件，通过module这个属性进行配置

   module: { // 用来配置第三方的loader 模块
       rules: [ // 匹配的规则
           // use 表示使用哪些模块来处理test所匹配到的文件
           // use 中的相关loader模块的调用顺序是从后向前调用的
            {test: /\.(jpg|png|gif|bmp|jpeg)$/,use: 'url-loader'}

小结：

Webpack 处理第三方文件类型的过程：

1. 发现处理这个文件不是JS文件，然后回去 配置文件中，查找对应的第三个loader规则
2. 如果找到了对应规则，则会调用对应的loader 处理这种文件类型；
3. 在调用loader的时候，是从后向前调用
4. 当最后一个loader调用完毕，会把处理的结果，直接交给webpack进行打包，最终输出到bundle.js 中去