Webpack安装和打包

1）npm init -y 创建package.json文件
2） npm i webpack -g全局npm i webpack -save-dev局部
安装webpack
3）npm i webpack-cli -g 全局 npm i webpack-cli -d 局部
安装webpack-cli
4）webpack -v 查看webpack版本
5）webpack .\src\main.js --output .\dist\bundle.js 用webpack打包
es6的语法太高级的，浏览器不识别，用webpack打包，打包好的文件为dist下的bundle.js
index.html 中引入这个文件，而不是引入 main.js

    <script src="../dist/bundle.js"></script>

webpack作用
a webpack 能够处理相互之间的依赖关系
b webpack能够处理js 的兼容问题，浏览器不识别的高级语法转换成浏览器能识别的
只要有一个main.js 文件在这个文件中，导入不同的包进行编写代码，然后用webpack打包
6）在根目录下建立webpack.config.js文件

const path=require("path") 
module.exports={      
    entry:'./src/main.js',      
    output:{          
          path:path.resolve(__dirname,"dist"),          
          filename: "bundle.js"      
          }  
}

指定出入口函数运行时只需要webpack 就可以
7）终端运行 webpack
8）npm i webpack-dev-server -D
安装webpack-dev-server
9）package.json中添加dev

"scripts": {    
    "test": "echo \"Error: no test specified\" && exit 1",   
    "dev": "webpack-dev-server"  
},

修改package.json dev
"dev": "webpack-dev-server --open"
每次启动npm run dev后会自动打开页面
"dev": "webpack-dev-server --open --port 3000"
修改端口号
"dev": "webpack-dev-server --open --port 3000 --contentBase src"
自动进入页面
"dev": "webpack-dev-server --open --port 3000 --contentBase src --hot"
热重载，不需要重新更新module,只更新修改的部分
10）将html中的script引入变成/bundle

  <head>      
        <meta charset**="UTF-8"**>     
        <title>**Title**</title>     
        <script src**="/bundle.js"**></script> 
  </head>

webpack-dev-server 帮我们打包生成的bundle.js文件并没有打包存放到物理磁盘上，而是直接托管到了电脑的内存中，所以在项目根目录中，根本找不到打包好的bundlejs
可以认为 webpack-dev-server把打包好的文件，以一种虚拟的形式，托管到了项目的根目录中和dist src node_moudle平级
目的：方便打包构件
11）终端运行npm run dev 只要在终端运行此句后，只要有内容修改，不需要重启和刷新页面，页面就会自动切换
12）安装html-webpack-plugin
npm i html-webpack-plugin -D
让其访问内存中的页面，而不是硬盘中的html，在一定程度上提高效率
html-webpack-plugin作用
a自动在内存中，根据指定页面生成一个页面
b自动把打包好的bundle.js 追加到页面中去
13）在webpack.config.js中添加该plugin

//只要是插件都要放到 plugins中  
const  htmlWebpackPlugin=require("html-webpack-plugin");
plugins:[      //配置一个在内存中生成HTML的插件      
      new htmlWebpackPlugin({          //指定模板页面          
          template: *path*.resolve(__dirname,"src/index.html"),                         
          filename: "index.html"      
       })

14）对于css，less，seas等文件的引入
在main.js文件中引入

 import "./css/index.css"

但是webpack只能解析js文件，不能解析css文件并打包
安装 style-loader css-loader
npm i style-loader -D
npm i css-loader -D
15）在webpack.config.js文件中添加module，和plugins平级

moudle:{ //这个节点用于配置所有的第三方模块加载器
    rules:[
        {test:/\.css$/,use:['style-loader',"css-loader"]}
    ]
}

当遇到.css文件时候，用style-loader和css-loader来解析
webpack处理第三方文件类型的过程
1）发现要处理的不是js文件，然后就去配置文件中，查找有没有对应的第三方loader规则
2）如果能找到对应的规则，就会调用对应的loader处理这种文件类型
3）调用loader的时候是从后往前调用的
最后一个loader调用完毕，交给webpack打包

最后编辑于：2020.05.27 21:24:49