webpack

概念

本质上，webpack是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个bundle。

为什么使用webpack

node.js 使用的是common.js模块化规范

其他的模块化规范还有cmd AMD es6等

文件的一个上下级
w   e   b   p   a   c   k   2
|                       |
|       
src                       |
|                         |
|                         |
a.js,  
index.js,                     |
index.css                     |
                          |
                           |
                           |
                           |
                           |
                       webpack.config.js    node-module   index.html
  webpack2文件夹下有src文件夹和webpack.config.js文件还有node-module
  src文件夹下有a.js文件和index.js文件

//es6的一个写法:
//a.js
//导出
export default (a,b)=>{
    return a+b;
},
//index.js
//导入
import sum from "./a"
import "index.css"
let s = sum(1,2);
console.log(s);
//index.css
.red{
    color:red;
}
//index.html
<div class="red">1111111</div>

在es6的一个模块化规范的写法中，编译器无法编译

这样就需要借助webpack这个包管理工具来进行编译并打包

安装webpack

首先初始化package.json文件  //package.json这个文件的作用：1，初始化一个我们的工程 2，这个文件里记录了安装的nodemon 包，安装的一些依赖会被记录在这个文件中3，这个里面的scripts键所对应的值可以配置一些命令
命令：npm init -y
安装webpack：
需要安装webpack 还需要安装webpack的脚手架
命令：npm i webpack  wenpack-cli

运行webpack

1、npm是包管理平台，可以通过npm在平台找到各种资源，然后安装进来
2、npx可以帮我们找到node-module包里面的一些执行文件并直接执行
3、运行webpack就需要我们来启动webpack的执行文件
4、在node-module包下有一个.bin文件夹，.bin文件夹下有webpack执行文件
5、所以我们的目的是在终端里运行这个webpack执行文件
运行webpack有两种方式：
1、命令：npm node-module/.bin/webpack
这样就可以找到并执行webpack执行文件然后帮我们编译(打包)完成上面写的es6代码
在webpack文件夹下可以找到编译好(打包好)并生成的代码：dist文件也是打包后自动生成的
我们需要的是dist文件下的main.js
//main.js
(()=>{"use strict";console.log(3)})();//这就是上面写的es6代码所编译后的代码
2、命令：npx webpack
这个命令它会在node-module包里帮我们找到webpack执行文件
过程和命令1都是差不多的也会自动帮我们生成
//main.js
(()=>{"use strict";console.log(3)})();这就是上面写的es6代码所编译后的代码
//这两个命令用哪个都可以，第二个命令更方便

webpack.config.js配置

在上面的dist文件是编译后(打包后)自动生成的，如果我们不想生成dist文件夹，我们想改个名字，类如我们想生成的文件夹的名字就叫name，就需要创建wenpack.config.js文件

dist下的main.js文件同上

这个文件是可以配置webpack config—设置的意思

原理：我们在运行webpack执行文件的时候，它会先看我们的平台有没有webpack.config.js文件如果没有就直接执行，如果有它会按照我们的配置来执行生成

//创建webpack.config,js文件
//完成webpack配置
//webpack编译的过程中采用的是common.js模块化规范
//这里可以去webpack官网查看API文档
const path = require("path");//引入path模块
const HWP = require("html-webpack-plugin");//引入插件
module.exports={
    //这里面有几个参数
    //entyr  ：入口文件，因为我们的index.js文件需要webpack打包，所以我们的入口文件就是index.js文件 
    //output : 输出文件，我们在打包后会输出一个文件夹dist和main.js文件
    entyr:"./src/index.js"
    output:{
    /*
    path是一个模块所以需要引入
    path.resolve是可以把路径给拼接起来
    列如：
    path.resolve("/webpack","/name")//会返回'webpack/name'这样一个拼接的路径
    也可以用path.join()//join也可以拼接
    __dirname当前文件的一个根路径
    path:path.resolve(__dirname,"name");//所以这段代码会找到webpack文件夹下创建一个name文件夹
    先找到这个根路径然后又把name给拼接了上去
    详情见：path.resolve菜鸟教程
    */
    //之前的那种方式生成的是dist文件夹和main.js文件，现在我们不想这样
    path:path.resolve(__dirname,"name");//我们想生成一个name文件夹
    filename:"home.js"//在name文件夹下生成一个home.js文件
}
//如果我们执行一下就会报错npm run dev
//因为我们在index.js文件里引入了css文件
//我们创建好的index.css是不会被插入到index.js里面的这里需要两个插件
//css-loader  用来解析css的       
//style-loader  用来把解析后的css插入到index.js这个文件中
npm i style-loader css-loader
//less sass stylusy  函数的css
//如果使用函数式css就需要安装其他插件
//类如：less  less-loader  less-style
//模块  制定规则
module:{
    rules[//规则
        //loader是从后往前加载的，从右往左加载的 
        /*
         {
            text:/\.css$/, 匹配规则:查找以.css结尾的文件
            use:"style-loader"
        }
        {
            text:/\.css$/, 匹配规则:查找以.css结尾的文件
            use:"css-loader"  使用
        }
        */
        我们除了这一种写法也可以写到一起
        {
        //把css用css-loader解析然后用style-loader解析，最后插入进去index.js
        text/\.css$/,
        use:["style-loader","css-loader"]
        }
    ]
}
//打包生成的home.js文件如果我们要使用就要在webpack下创建一个HTML文件
//比如index.html在HTML文件里引入home.js   <script src="./name/home.js"></script>
//但是如果我们改变了home.js 的名字比如我们生成了一个a.js我们还要改index.html里的src路径，就比较麻烦
//所以这里可以引入一个插件，让他自动把js文件插入到HTML里
//html-webpack-plugins//可以把编译后的js文件插入到HTML里面,并生成一个HTML文件
//命令：npm i html-webpack-plugin
//下载好插件引入
//然后new实例化一下，放到plugins里
//插件的意思
plugins:[
    new HWP({
     template:path.resolve(__dirname,"index.html")   //入口文件是index.html
        fliename:"main.html"//把index.html 赋值到main.html文件里并插入之前打包好的home.js    
    });
]
}
//webpack-dev-server  帮我们自动启动一个服务并执行编译后的HTML

package

"dev": "webpack --mode development",//开发环境  打包出来的东西没有被压缩
    "pro": "webpack --mode production"//生产环境 打包出来的东西被压缩

webpack的作用就是把该压缩的压缩改引入的引入，最后规整一个静态资源

index.js放着我们编译后的js 和编译后的css

我们可以通过一个文件的引入就可以把我们的所有东西都加载进来

webpack

path.resolve 官网path模块

less 官网less

引入的插件

    1、先生成package.json
        npm init -y
    2、下载webpack
    npm i wenpack
    3、安装webpack脚手架
        npm i wenpack-cli
  3、安装自动引入html-webpack-plugins
        npm i html-webpack-plugins
    4、安装引入css的插件
     npm i css-loader style-loader

5、安装引入less的插件

npm i less less-loader less-style

安装webpack-dev-server

如果你想要自动起一个服务，那就需要安装这个插件

它会自动启动一个服务，而且还可以切换路由到HTML页面下

http://localhost:8080/

安装webpack-dev-server
命令:npm i webpack-dev-server
看一下package.json文件下安装的webpack-cli安装的是不是和webpack-dev-server同一个版本的
如果你的webpack-dev-server是3版本的那你就要先卸载webpack-cli
命令：npm uninstall webpack-cli
在下载3版本的
命令：npm i webpack-cli@3
然后在package.json文件里scripts下配置一个启动方法
"dev:server":"webpack-dev-server",
打开终端输入：npm run dev:server

如果想要更加方便那就需要配置webpack.config.js文件

//不需要引入，可以直接使用
    devServer:{
        port:9999,      //自定义端口号
        open:true,      //自动打开浏览器
        compress:true,   //启用gzip压缩包
        openPage:"/hello.html" //找到编译后的HTML，并自动打开
    },
    而且这里面还有一个重要的就是可以做后端跨域
    当同源策略不一致的情况下就会出现跨域问题
    pathRewrite这个属性是可以解决这个问题

在这里给看一篇别人写的文章

      <br />1.先下载http-proxy-middleware，并引入到webpack.config.js文件里

const proxy = require('http-proxy-middleware');

const proxy = require('http-proxy-middleware');
module.exports = {   
devServer:{
    host: 'localhost',//target host
    port: 8080,
    //proxy:{'/api':{}},代理器中设置/api,项目中请求路径为/api的替换为target
    proxy:{
        '/api':{
            target: 'http://192.168.1.30:8085',//代理地址，这里设置的地址会代替axios中设置的baseURL
            changeOrigin: true,// 如果接口跨域，需要进行这个参数配置
            //ws: true, // proxy websockets
            //pathRewrite方法重写url
            pathRewrite: {
                '^/api': '/' 
                //pathRewrite: {'^/api': '/'} 重写之后url为 http://192.168.1.16:8085/xxxx
                //pathRewrite: {'^/api': '/api'} 重写之后url为 http://192.168.1.16:8085/api/xxxx
           }
    }}
},
//...
}