Webpack【搭建Webpack环境、Webpack增加配置文件、Webpack中使用Loader、Webpack分离CSS文件 】(一)-全面详解（学习总结---从入门到深化）

npm install --save webpack@5.73.0
npm install --save webpack-cli@4.10.0

mkdir webpack_demo
cd webpack_demo

npm init

npm install --save-dev webpack@5.73.0
npm install --save-dev webpack-cli@4.10.0

// src/show.js
export function show(content) {
 window.document.getElementById('root').innerText = 'Hello,' + content;
}

// src/index.js
import { show } from './show.js'
show('iwen');

<!-- index.html -->
<div id="root"></div>
<script src="../dist/main.js"></script>

module.exports = {
 // JavaScript 执行入口文件
 entry: './src/index.js',
};

const path = require('path');
module.exports = {
 // JavaScript 执行入口文件
 entry: './src/index.js',
 output: {
  // 把所有依赖的模块合并输出到一个 bundle.js 文件
  filename: 'bundle.js',
  // 输出文件都放到 dist 目录下
  path: path.resolve(__dirname, './dist'),
}
};

npm install --save-dev css-loader@6.7.1

const path = require('path');
module.exports = {
 module:{
  rules:[
   {
      test: /\.css$/,
      use: ['css-loader']
   }
 ]
}
};

import "../src/css/index.css"

npm install --save-dev style-loader@3.3.1

const path = require('path');
module.exports = {
 module:{
  rules:[
   {
      test: /\.css$/,
      use: ["style-loader",'css-loader']
   }
 ]
}
};

npm instal --save-dev less@4.1.3 less-loader@11.0.0

const path = require('path');
module.exports = {
  module: {
    rules: [
     {
        test: /\.less$/,
        use: ['style-loader', 'css-loader', 'less-loader']
     }
   ]
 }
};

import "../src/css/style.less"

npm instal --save-dev sass@1.52.3 sass-loader@13.0.0

module.exports = {
  module: {
    rules: [
     {
        test: /\.(scss|sass)$/,
        use: ['style-loader', 'css-loader', 'sass-loader']
     }
   ]
 }
};

import "../src/css/style.scss"

npm install html-webpack-plugin@5.5.0 --save-dev

const HtmlPlugin = require('html-webpack-plugin')
module.exports = {
  plugins: [
    new HtmlPlugin({
      template: './src/index.html', //指定源文件的存放路径
      filename: './index.html'  // 指定生成的文件的存放路径
   })
 ]
};

npm install --save-dev mini-css-extract-plugin@2.6.1

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
  module: {
    rules: [
     {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader']
     },
     {
        test: /\.less$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader','less-loader']
     },
     {
        test: /\.(scss|sass)$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader','sass-loader']
     }
   ]
 },
 plugins: [
    new MiniCssExtractPlugin({
      filename:"./css/index.css"
   })
 ]
};

npm install --save-dev optimize-css-assets-webpack-plugin@6.0.1

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
module.exports = {
  module: {
    rules: [
     {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader',"postcss-loader"]
     },
     {
        test: /\.less$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader',"postcss-loader",'less-loader']
     },
     {
        test: /\.(scss|sass)$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader',"postcss-loader", 'sass-loader']
     }
   ]
 },
  plugins: [
    new MiniCssExtractPlugin({
      filename:"./css/index.css"
   }),
    new OptimizeCSSAssetsPlugin()
 ]
};

npm install --save-dev @babel/core@7.18.5
npm install --save-dev @babel/preset-env@7.18.2
npm install --save-dev babel-loader@8.2.5

// babel.config.js
module.exports = {
  presets: ['@babel/preset-env']
}

module: {
    rules: [
     {
        test:/\.js$/,
        use:['babel-loader']
     },
   ]
}