webpack基本配置（插件 + loader + 多入口）

进行全局安装webpack：npm i -g webpack webpack-cli webpack-dev-server

在项目文件夹之中安装 webpack , webpack-cli , webpack-dev-server 三个插件的本地版本;
- 指令 : npm i -D webpack webpack-cli webpack-dev-server
- 注意，在创建文件夹的时候，要先进行 npm init 初始化工作

运行指令： webpack --config ./你的webpack文件名.js
运行dev服务器命令: webpack-dev-server --config ./你的webpack文件名.js

插件说明

HtmlWebpackPlugin

该插件将为你生成一个 HTML5 文件， 在 body 中使用 script 标签引入你所有 webpack 生成的 bundle
安装命令：npm install --save-dev html-webpack-plugin

• 配置：

  const HtmlWebpackPlugin = require('html-webpack-plugin');
  const path = require('path');

  module.exports = {
    // 配置入口文件，入口文件可以引入其他文件
    entry: 'index.js',
    // 出口文件
    output: {
      // 路径 
      path: path.resolve(__dirname, './dist'),
      // 文件名 可以用hash进行命名，其中 [hash:5] 表示仅展示5位哈希值   
      // filename:'index-[hash:5].js' 
      filename: 'index_bundle.js',
    },
    // 使用插件
        plugins:[
        new HtmlWebpackPlugin({
            // 如果使用了template，那么就会忽略title
            title:'this is webpack demo',
            // template进行指定模板html
            template:'./src/index.html',
            // 我们可以通过inject来控制script标签的位置
            inject:'body'
            
        })
    ],
    /*
      HtmlWebpackPlugin有option配置，不进行配置会默认生成一个index.html进行引入入口文件：
    */
  };

CleanWebpackPlugin

作用：每次进行启动webpack命令的时候，都会清除dist目录下的所有内容
安装命令: npm install --save-dev clean-webpack-plugin

  const { CleanWebpackPlugin } = require('clean-webpack-plugin');
  ...
  plugins:[new CleanWebpackPlugin()]

MiniCssExtractPlugin(需配合下面的loader进行食用)

作用：抽离css文件，可以不在入口文件中引入css文件
安装命令：npm i mini-css-extract-plugin

//引入插件
  const MiniCssExtractPlugin = require("mini-css-extract-plugin");
  ...
  plugins:[
  new MiniCssExtractPlugin({
      // 配置css文件存放的路径
      // 其中这里的name指的是entry中的name
      filename: "[name]/[name].css",
  }),]
  ...
    module: {
        rules: [
            {
                test: /\.css$/,
                // css-loader只负责将css文件进行加载
                // style-loader负责将样式添加到DOM中
                // 使用多个loader时，是从右向左
                use: [MiniCssExtractPlugin.loader, 'css-loader']
            }
        ]
    },

多入口配置

    //在一开始的入口中用键值对的方式进行定义入口文件
    ...
    entry: {
        // 我们在配置入口的时候，去编写一个对象对象存在key，value两部分数据
        // key数据我们也叫做 chunk 数据，是这个入口的标记！我们在html-webpack-plugin插件之中使用
        "index": './src/index/index.js',
        "detail": './src/detail/index.js'
    },
    //注意：在多入口的时候，对应的 HtmlWebpackPlugin也要进行多次的new操作；
    ...

    plugins:[
        new HtmlWebpackPlugin({
            template: './src/index/index.html',
            // 我们可以通过inject来控制script标签的位置
            inject: 'body',
            // 我们通过入口编译好的代码
            // 表示引入的代码名称
            // chunks名称就是我们在定义入口时对象的key值
            chunks: ['index'],
            filename: 'index.html'

        }),
        new HtmlWebpackPlugin({
            template: './src/detail/index.html',
            // 我们可以通过inject来控制script标签的位置
            inject: 'body',
            // 我们通过入口编译好的代码
            chunks: ['detail'],
            filename: 'detail.html'

        })]

loader配置

• loader的作用：告诉webpack用什么样的工具去处理什么样的文件，例如处理scss，typescript，css等都需要用到loader
• 注意，要在入口文件中进行引入css文件
• 阅读官方文档

进行配置css的loader
安装css的loader命令：npm install --save-dev css-loader
安装sass的loader：npm install sass-loader sass webpack --save-dev

    //所有的loaders配置都放在module下
    module: {
        rules: [
            //处理所有后缀是css的文件
            {
                test: /\.css$/,
                // css-loader只负责将css文件进行加载
                // style-loader负责将样式添加到DOM中
                // 使用多个loader时，是从右向左
                use: ['style-loader', 'css-loader']
            },
            // 配置scss
            {
                test: /\.scss$/,
                use: ['style-loader', 'css-loader', 'sass-loader']
            }
        ]
    },

配置dev-server服务器

• 运行该指令后可以直接打开项目到浏览器上

运行指令： webpack-dev-server --config /你webpack的名字 --open

    // 配置dev-server服务器
    devServer:{
        // port，前端服务器端口
        port:8080,
        // 是否启动热刷新功能
        hot:true,
    }

在package.json上进行配置指令：

按照下面配置完成后，运行命令：npm run build/dev就会执行所自定义的指令

// 找到scripts

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config ./webpack.config.js",
    "dev": "webpack-dev-server --config ./webpack.config.dev.js --open"
  },

完整的webpack.config.js文件：

运行指令： webpack --config ./你的webpack文件名.js
运行dev服务器命令: webpack-dev-server --config ./你的webpack文件名.js

let path = require('path');

let HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
    entry: {
        // 我们在配置入口的时候，去编写一个对象对象存在key，value两部分数据
        // key数据我们也叫做 chunk 数据，是这个入口的标记！我们在html-webpack-plugin插件之中使用
        "index": './src/index/index.js',
        "detail": './src/detail/index.js'
    },
    output: {
        // 多入口的配置我们在输出js名称的时候可以使用指令命名
        filename: '[name]/[name].js',
        path: path.resolve(__dirname, 'dist')
    },
    mode: 'production',
    //创建一个map文件，说明我们每个代码的源码位置
    // devtool: 'source-map',


    // 配置loader
    // 告诉webpack用什么样的工具去处理什么样的文件
    // 处理css
    module: {
        rules: [
            {
                test: /\.css$/,
                // css-loader只负责将css文件进行加载
                // style-loader负责将样式添加到DOM中
                // 使用多个loader时，是从右向左
                use: [MiniCssExtractPlugin.loader, 'css-loader']
            },
            // 配置scss
            {
                test: /\.scss$/,
                use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
            }
        ]
    },
    plugins: [
        new CleanWebpackPlugin(),
        // 配置css抽离插件
        new MiniCssExtractPlugin({
            // 配置css文件存放的路径
            filename: "[name]/[name].css",
        }),

        /**
         * 在多入口配置之中我们需要配置多个html-webpack-plugin
         */
        new HtmlWebpackPlugin({
            template: './src/index/index.html',
            // 我们可以通过inject来控制script标签的位置
            inject: 'body',
            // 我们通过入口编译好的代码
            // 表示引入的代码名称
            // chunks名称就是我们在定义入口时对象的key值
            chunks: ['index'],
            filename: 'index.html'

        }),
        new HtmlWebpackPlugin({
            template: './src/detail/index.html',
            // 我们可以通过inject来控制script标签的位置
            inject: 'body',
            // 我们通过入口编译好的代码
            chunks: ['detail'],
            filename: 'detail.html'

        })

    ],
    // 配置dev-server服务器
    devServer: {
        // port，前端服务器端口
        port: 8080,
        // 是否启动热刷新功能
        hot: true,
    }
}