webpack相关以及搭建react环境

webpack官网：https://www.webpackjs.com/                      

一、webpack介绍

    1、webpack  是一个现代 javascript 应用程序的静态模块打包器

        

    入口

    输出

    插件

二、安装

    1、webpack     全局安装    

        npm i webpack -g

        npm i webpack-cli -g

        webpack -v    查看全局的版本

    2、项目内安装

        npm init -y

        npm i webpack -D

        npm i webpack-cli -D

 

        查看项目内的webpack的版本：

//在package.json
scripts:{
        'test':'webpack  --version'
}

//然后在控制台npm run test

三、代码

       

        webpack --mode development

        局部的

        "build":"webpack -W"

   

3、解决缓存问题

        bundle[hash:8].js

        html文件自动引入js文件，需下载html-webpack-plugin插件

        npm i html-webpack-plugin

4、每次打包都会产生一个js文件，

    目的只保留最新打包的文件，旧的都删除

        npm i  clean-webpack-plugin 

5、打包css文件

    style-loader  

    css-loader

     npm i style-loader css-loader

6、打包图片  

     url-loader  file-loader

     npm i url-loader  file-loader

7、在服务器上运行(会打开8080端口）

      webpack-dev-server（自动有热更新的功能）

      npm i  webpack-dev-server

devServer:{  //webpack-dev-server的配置
        port:3000,
        proxy:{
            "/lg":{
                "target":"https://m.lagou.com",
                "changeOrigin":true,
                "pathRewrite":{
                    "^/lg":"/"
                }
            }
        }
    },

    可以自己改端口，比如把8080端口改成3000端口，同时在devServer里面可以配置proxy代理

 

8、搭建简单的react脚手架环境

     npm i babel-loader @babel/core @babel/preset-env

    //配置babel

    npm react react-dom @babel/preset-react

    配置规则

{
    test: /\.js$/,
        exclude: /(node_modules)/,  //排除node_modules
        use: {
            loader: 'babel-loader',
            options: {
                presets: ['@babel/preset-env','@babel/preset-react']
            }
        }
}