react webpack 的基本配置

1、认识webpack

  webpack是一个资源打包器
  分为四大块：
  ①入口  ②出口  ③loader  ④插件

2、安装方式

• ①全局安装：

    npm i webpack -g
    npm i webpack-cli -g
  

• ②在项目中局部安装：

   首先需要初始化  npm init -y
   进行局部安装
    npm i webpack --save
    npm i webpack-cli --save
  

在根目录从创建src文件夹、public文件夹以及webpack.config.js文件
src文件夹为入口文件夹 需要打包的除html文件之外的文件放在里面
public文件夹存放需要打包的html文件
打包完成后自动生成dist文件夹 打包好的文件就在里面

3、webpack的配置

在项目根目录手动创建webpack.config.js文件

打包好的项目有两种代码模式
压缩模式：production
不压缩：development

出入口文件
默认入口文件为 “src/index.js”
默认出口文件为 “dist/main.js”

插件的安装
① html-webpack-plugin 自动根据html模板生成一个html文件, 自动引入就打包后的js
② clean-webpack-plugin 清理dist中打包后的文件

安装的插件在webpack.config.js文件中引入

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin'); 
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

单入口多出口配置

module.exports = {
		entry: './src/index.js', //需要打包的入口文件
        mode:"development",  //是否压缩
        output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle[hash:8].js'
  },
  devServer:{
      port: 8000,
      inline:true
  }
  }

多入口单出口

module.exports = {
        mode:"development",
        // 设置成一个数组,数组当中的每一个元素即是打包的文件。
        entry:["./src/one.js","./src/two.js"],
        output:{
            filename:"bundle.js"
        }
    }

多出口多入口

module.exports = {
    mode:"development",
    // 设置成一个数组,数组当中的每一个元素即是打包的文件。
    // 可以是字符串，数组，对象
    entry:{
        one:"./src/one.js",
        two:"./src/two.js"
    },
    output:{
        // 将入口entry对象的属性名，替换[name]
        filename:"[name].bundle.js"
    }
}

4、loader

除了js文件，其他文件比如css、图片等打包都需要loader
npm i style-loader
npm i css-loader
npm i url-loader
npm i file-loader
在webpack.config.js中配置

module: {
    rules: [
      {   //打包css
        test: /\.css$/,
        use: ['style-loader','css-loader']
      },
      {
        test: /\.(png|jpg|gif)$/i,  //匹配的图片格式
        use: [
          {
            loader: 'url-loader',  //背景图片的引用
            options: {
              limit: 8192
            },
          },
        ],
      },
      
    ]
  }

plugins
plugins类型是一个数组。该数组的每一个元素是你要使用的plugin(插件)

plugins:[
            new CleanWebpackPlugin(),
            new HtmlWebpackPlugin({
                template:"./public/index.html",// 指定模板地址
                // filename: "home.html",// 将打包后的文件名字进行重置，默认是index.html
                // hash:true,// 为引入JS的地址增加后缀，用于清除缓存。
                // inject: false,//  是否嵌入到HTML文件当中，默认是true
                // inject: "body"
                // inject: "head"
                // chunks: ["my","index"],// 入口属性名。并不是文件名。指定打包的文件
                // excludeChunks: ["my"],// 除了入口属性为my的文件，全部打包
                title: "大家好，你现在学的是webpack",
                arr:[1,2,3,4],
                minify: {
                    removeComments:true,// 清除注释
                    removeAttributeQuotes:true,// 清除双引号
                    collapseWhitespace:true,// 进行折叠，去除空格
                }
            })
        ]

package.json文件的配置
除了以上的配置外 在package.json文件中还需要添加热更新以及启动命令
此时就需要安装webpack-dev-server插件了
npm i webpack-dev-server

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack -w",  //热更新 
    "start": "webpack-dev-server -w --progress --open"  //npm run build 启动项目
  }

**

总结

**
本文中所有需要安装的依赖有以下几个

	npm init -y   //初始化
    npm i webpack --save
    npm i webpack-cli --save
    npm i html-webpack-plugin  //自动根据html模板生成一个html文件, 自动引入就打包后的js
    npm i clean-webpack-plugin  //清理dist中打包后的文件
    npm i style-loader    
    npm i css-loader  
    npm i url-loader
    npm i file-loader   
    npm i webpack-dev-server  //服务器
    
	**npm run build** //启动打包命令 

webpack.config.js配置文件所有代码

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通过 npm 安装
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
  entry: './src/index.js',
  mode:'development',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle[hash:8].js'
  },
  devServer:{
      port: 8000,
      inline:true
  },
  module: {
    rules: [
      { 
        test: /\.css$/,
        use: ['style-loader','css-loader']
      },
      {
        test: /\.(png|jpg|gif)$/i,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192
            },
          },
        ],
      }
    ]
  },
//   plugins: [
//     new HtmlWebpackPlugin({template: './index.html'}),
//     new CleanWebpackPlugin()
//   ]

// plugins类型是一个数组。该数组的每一个元素是你要使用的plugin(插件)
    plugins:[
            new CleanWebpackPlugin(),
            new HtmlWebpackPlugin({
                template:"./public/index.html",// 指定模板地址
                // filename: "home.html",// 将打包后的文件名字进行重置，默认是index.html
                // hash:true,// 为引入JS的地址增加后缀，用于清除缓存。
                // inject: false,//  是否嵌入到HTML文件当中，默认是true
                // inject: "body"
                // inject: "head"
                // chunks: ["my","index"],// 入口属性名。并不是文件名。指定打包的文件
                // excludeChunks: ["my"],// 除了入口属性为my的文件，全部打包
                title: "大家好，你现在学的是webpack",
                arr:[1,2,3,4],
                minify: {
                    removeComments:true,// 清除注释
                    removeAttributeQuotes:true,// 清除双引号
                    collapseWhitespace:true,// 进行折叠，去除空格
                }
            })
        ]
};