国产成人无码免费视频在线,亚洲色一色噜一噜噜噜,国产另类ts人妖一区二区

:: :: :: ::

::

公告

webpack5簡單配置

webpack4之后webpack5又做了蠻多的變化，這里簡單介紹一下webpack5的配置可以參考官網(wǎng)

mkdir react-cli

cd react-cli

npm init 初始化package.json

npm install webpack webpack-cli --save-dev

現(xiàn)在我們將創(chuàng)建以下目錄結(jié)構(gòu)、文件和內(nèi)容：

//index.js
import './index.css'
function component() {
  const element = document.createElement('div');

  // lodash（目前通過一個 script 引入）對于執(zhí)行這一行是必需的
  element.innerHTML = "<div class='demo'>322222是www一個demo332222222222dddd</div>";

  return element;
}

document.body.appendChild(component());

下面介紹一下package.json

"scripts": {
    "dev": "webpack server --config scripts/dev.js",
    "build": "webpack --config scripts/build.js",
    "server": "serve ./build -p 5000"
  },

然后介紹一下dev.js,我這里使用merga合并兩個配置

process.env.NODE_ENV = 'development';

const path=require('path');
const common = require('../webpack.config.js');
const { merge } =require('webpack-merge');
const webpack =require('webpack');
const webpackDevServer = require('webpack-dev-server');
const isDev = process.env.NODE_ENV === 'development';
const publicPath = !isDev ? './' : (isDev && '/');

module.exports= merge(common,{
  mode: 'development',
  devtool: 'inline-source-map',
  devServer:{
    static: {
      directory: path.join(__dirname, '../dist'),
    },
    compress: true,
    open: true,
    devMiddleware: {
      publicPath: '/',
    },
  }
})

然后看一下webpack.config.js文件

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const isDev = process.env.NODE_ENV === 'development';
const resolve =(pathName) => path.resolve(__dirname,pathName);
const publicPath = !isDev ? './' : (isDev && '/');
module.exports = {
  mode: isDev ? 'development' : 'production',
  entry: path.resolve(__dirname, './src/index.js'),
  output: {
    path: path.join(__dirname, !isDev ? './build' : './dist'),
    filename: !isDev ? 'js/[name].[contenthash:8].js' : 'js/[name].js',
    chunkFilename: !isDev ? 'js/[name].[contenthash:8].chunk.js' : 'js/[name].chunk.js',
    publicPath
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx|ts|tsx)?$/,
        use: [
          {
            loader: 'babel-loader'
          },
        ],
      },
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.(png|jpe?g|gif|webp|bmp|woff2?|eot|ttf|otf)$/,
        type: 'asset',
        parser: {
          dataUrlCondition: {
            maxSize: 4 * 1024 // 默認配置是8kB
          }
        }
      },
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template:resolve('./index.html'),
      inject: true,
    })
  ],
  resolve: {
    extensions: ['.json', '.js', '.jsx', '.ts', '.tsx'],
    alias: {
      '@': resolve('../src'),
    }
  },
  optimization: {
    splitChunks: {
      chunks: 'all',
    }
  }
}

最后看一下build.js

process.env.NODE_ENV = 'production';

const path=require('path');
const common = require('../webpack.config.js');
const { merge } =require('webpack-merge');

module.exports = merge(common,{
  mode: 'production',
  devtool: false,
})

以上只是webpack5簡單的配置，代碼壓縮后面在介紹

官網(wǎng)上還有一種通過Node.js api的方式進行配置

const path = require('path');
const common = require('../webpack.config.js');
const { merge } = require('webpack-merge');
const webpack = require('webpack');
const webpackDevServer = require('webpack-dev-server');
const isDev = process.env.NODE_ENV === 'development';

async function initDevServer() {
  const options = {
    static: {
      directory: path.join(__dirname, '../dist'),
    },
    devMiddleware: {
      publicPath: '/',
      writeToDisk: false,
    },
    open: true,
    allowedHosts: 'all'
  }

  common.mode = "development"

  const compiler = webpack(common);

  const devServer = new webpackDevServer(options, compiler);

  (async () => {
    await devServer.start();

    console.log(`Dev server started \n`);
  })();
}

initDevServer();


//"dev": "node scripts/dev.js",

posted on 2022-10-07 10:01 執(zhí)候閱讀(79) 評論(0) 收藏舉報

刷新頁面返回頂部