Package HTML pages:

  • You need to use htMl-withimg-loader, and of course you need to introduce htML-webpack-plugin
{
    test:/\.html$/,
    use:'html-withimg-loader',},Copy the code

Pack image and font files:

  • File-loader is required
{
    test: / \. (PNG | JPG | | GIF the vera.ttf) $/, use: {/ / to be a limit, when our picture is less than how many k with base64 conversion / / or else use the file - loader to generate the real image loader:'file-loader',
       options:{
           limit:1,// the value is the image size unit byte, exceeding the base64 format string outputPath:'/img/'// Put it in the image folder publicPath:'http://www.hahahahahha.cn'// Add a public path to the image separately}}},Copy the code

Package more advanced JS syntax:

  • The babel-loader is required
{
    test:/\.js$/,//normal normal loader use:{loader:'babel-loader'// Use babel-loader to convert es6 presets to es5 presets:['@babel/preset-env'
            ],
            plugins:[
                ["@babel/plugin-proposal-decorators", { "legacy": true }],
                ["@babel/plugin-proposal-class-properties", { "loose" : true}].'@babel/plugin-transform-runtime']}},Copy the code

Packing CSS files:

  • Cs-loader, style-loader(to put packed CSS in the style tag of the output HTML page)
  • If you want to compress CSS file, need to introduce MiniCssExtractPlugin. Loader plug-in
{test:/\.css$/, use:[
                MiniCssExtractPlugin.loader,
                'css-loader'.'postcss-loader'
            ]},
Copy the code

Please kindly point out any mistakes!