配置webpack

配置文件

配置文件名必须叫：webpack-config.js。打包的时候，webpack会先看有没有这个文件，有的话就按照这个去配置，没有就按默认的去打包。该文件需要手动创建，必须放在根目录下。 Webpack在执行的时候，除了在命令行传入参数，还可以通过指定的配置文件来执行。默认情况下，会搜索当前目录的webpack.config.js模块，返回一个json格式的配置信息对象，在该文件中我们可以去配置入口文件和打包文件位置名称。

在项目根目录新建一个webpack.config.js的文件，这是webpack默认的配置文件名称。

一个入口对一个出口文件

const path=require('path');
module.exports={                            //这个整个是nodejs的模块
    mode:"development",                     //配置打包模式
    entry:'./src/index.js',                 //入口配置
    output:{                                //出口配置
        // 解释：在当前目录下创建一个dist文件夹，path必须是绝对路径
        path:path.resolve(__dirname,'dist'),//__dirname代表当前文件夹。
        //path是必填项，而且要是绝对路径
        
        // 打包之后的文件名
        filename:"main.js",
    }
}

多入口对应一个出口文件配置

组件化开发的时候会用到多入口。例如把导航组件和轮播图组件需要打包到一个js文件里。
多入口的话，就把entry的值设置为一个数组，每个成员就是组件的js文件，而且打包顺序是按数组由前向后打包的。

let path = require('path');
module.exports={
    mode:development,//开发模式
    entry:[打包文件1，打包文件2...],
    output:{
        path:path.resolve(__dirname,'dist'),//__dirname代表当前目录下  dist：创建一个dist文件夹
        filename:'main.js'，//这里写的是在dist目录下的路径
    }
}

多入口对多个出口配置入口文件entry的值设置为一个对象 [name]是一个占位符，打包之后它代表了入口文件的属性名

let path = require('path');
module.exports={
    mode:development,//开发模式
    entry:{
        "index1":打包文件1路径,
        "index2":打包文件路径2，
        ...
    }
    output:{
        path:path.resolve(__dirname,'dist'),
        filename:'main_[name].js'，//name是占位符，可以直接写name
        //打包之后name就是入口文件的键名，打包后的文件名就是main_index1.js和main_index2.js
    }
}

webpack-dev-server服务

在html文件中引用bundle.js文件后，我们有几个问题需要解决。
main.js或它所引用的模块变化如何通知webpack，重新生成main.js？
非常简单，在根目录下执行webpack --watch就可以监控目录下的文件变化并实时重新构建。
上面只是实时构建，我们该如何把结果通知给浏览器页面，让html页面上的bundle.js内容保持最新？
webpack提供了webpack-dev-server解决实时刷新页面的问题，同时解决实时构建的问题。
webpack-dev-server是一个小型的Node.js Express服务器。
webpack-dev-server是一个独立的NPM包，你可以通过npm install webpack-dev-server来安装它。

webpack-dev-server服务安装步骤

安装webpack-dev-server
在全局环境中安装webpack-dev-server-g
在项目目录下执行命令 webpack-dev-server
这样我们就可以在默认的http://localhost:8080 网址上打开我们的index.html
注意：该功能默认监听的是public文件，所以出口文件名称要改为public

监听

webpack --watch作用：一保存就会进行打包

webpack-dev-server服务，它的功能就相当于vscode里的live server

实时刷新的作用，也会自动打包

命令：cnpm i webpack-dev-server --save-dev（局部安装），尽量不要安装全局的，有时可能会出现错误。
敲完命令以后，他可能会报两个错“peerDependencies WARNING ”，但是没关系，这个是提示你安装两个配置，不安装也没关系。
安装完以后使用webpack-dev-server命令运行，如果执行完该命令报错的话，就安装全局，如果全局安装还报错的话，就使用webpack server -open运行安装。

如果使用的是开发模式，该public文件放在内存里，会隐藏，而且index.html文件要放在public文件夹根目录下，可通过devServer配置进行更改。参考www.webpackjs.com/configurati… 或者调到生产模式

测试阶段跨域测试可以使用 devServer.proxy

devServer:{
   proxy: {
      "/api": {
       target: "http://localhost:3000",
       pathRewrite: {"^/api" : ""}
       }
   }
}

Loader

webpack本身只能处理js模块，如果要处理其他类型的文件，就需要使用loader进行转换。
loader本身

使用步骤：所有的都是先安装，再配置

import "./nav.css";//在js里引入css文件，直接import 路径

teacherWebpack