webpack4+ 疯狂踩坑记录

具体webpack的学习是参照技术胖的课程
但由于以上是webpack3.x版本。因此迈入了填坑大道

踩坑记录

1. 成功yarn init 生成package.json
   安装webpack，webpack-cli，配置build得到以下package.js
   局部安装webpack，打包命令可以为node_modules/.bin/webpack或webpack

	{
	  "name": "webpack",
	  "version": "1.0.0",
	  "description": "webpack",
	  "main": "main.js",
	  "repository": "https://gitee.com/zjrshiyi/preliminary-study-of-webpack.git",
	  "author": "shiyi <sky95aigo@qq.comgit>",
	  "license": "MIT",
	  "scripts": {
	    "build": "node_modules/.bin/webpack"
	  },
	  "dependencies": {
	    "webpack": "^5.41.1",
	    "webpack-cli": "^4.7.2"
	  }
	}

2.webpack-dev-server 服务热加载

yarn add webpack-dev-server安装
配置package.json

"serve": "webpack-dev-server"

配置 webpack.config

devServer:{
    //设置基本目录结构
    contentBase:path.resolve(__dirname,'dist'),
    //服务器的IP地址，可以使用IP也可以使用localhost
    host:'localhost',
    //服务端压缩是否开启
    compress:true,
    //配置服务端口号
    port:1717
  }

问题一：执行yarn serve 报错 Error: Cannot find module ‘webpack-cli/bin/config-yargs’

解决方法：webpack-cli版本为"webpack-cli": “^4.7.2”
重新安装 yarn add webpack-cli@3-D，我选了3.3.12

启动成功
Loaders是Webpack最重要的功能之一，他也是Webpack如此盛行的原因。通过使用不同的Loader，Webpack可以的脚本和工具，从而对不同的文件格式进行特定处理。
配置在 webpack.config 中的module中

插件。需要引入，配置在webpack/config中 plugins
3.打包html文件
插件html-webpack-plugin
安装配置

const htmlPlugin= require('html-webpack-plugin');
plugins:[
  new htmlPlugin({
     minify:{
         removeAttributeQuotes:true
     },
     hash:true,
     template:'./src/index.html'
   })
]

js压缩
插件：uglifyjs-webpack-glugin
安装，配置

const uglify = require('uglifyjs-webpack-plugin');
plugins:[
  new uglify()
]

5 .css文件打包
基本css文件打包
安装 style-loader css-loader
配置webpack.config

rules:[
      {
        test:/\.css$/,
        use:['style-loader','css-loader']
      }
    ]

以上基本css,html打包，js压缩没大问题

继续踩坑

问题二：css中出现图片，打包报错

安装两个解析图片用的loader

yarn add file-loader  url-loader

file-loader：解决引用路径的问题，拿background样式用url引入背景图来说，我们都知道，webpack最终会将各个模块打包成一个文件，因此我们样式中的url路径是相对入口html页面的，而不是相对于原始css文件所在的路径的。这就会导致图片引入失败。这个问题是用file-loader解决的，file-loader可以解析项目中的url引入（不仅限于css），根据我们的配置，将图片拷贝到相应的路径，再根据我们的配置，修改打包后文件引用路径，使之指向正确的文件。

url-loader：如果图片较多，会发很多http请求，会降低页面性能。这个问题可以通过url-loader解决。url-loader会将引入的图片编码，生成dataURl。相当于把图片数据翻译成一串字符。再把这串字符打包到文件中，最终只需要引入这个文件就能访问图片了。当然，如果图片较大，编码会消耗性能。因此url-loader提供了一个limit参数，小于limit字节的文件会被转为DataURl在js中，大于limit的还会使用file-loader进行copy。

webpack.config配置

{
   test:/\.(png|jpg|gif)/ , ///.(png|jpg|gif)/是匹配图片文件后缀名称
   use:[{
       loader:'url-loader', //是指定使用的loader和loader的配置参数
       options:{
           limit:500000 //是把小于500000B的文件打成Base64的格式，写入JS。
           outputPath:'images/' //打包的图片所在文件夹
       }
   }]
}

问题三：html中出现图片，图片获取不到

loader：html-withimg-loader

{
    test: /\.(htm|html)$/i,
     use:[ 'html-withimg-loader'] 
}

报错 html-webpack-plugin could not minify the generated output

解决方法： url-loader 中增加配置项 esModule:false

{
   test:/\.(png|jpg|gif)/ , ///.(png|jpg|gif)/是匹配图片文件后缀名称
   use:[{
       loader:'url-loader', //是指定使用的loader和loader的配置参数
       options:{
           limit:500000 //是把小于500000B的文件打成Base64的格式，写入JS。
           esModule: false, //默认值:true,描述:使用es模块化
           outputPath:'images/' //打包的图片所在文件夹
       }
   }]
}

问题四：css分离在js外

webpack3.x 使用的插件是extract-text-webpack-plugin

配置后打包报错：compiler.plugin is not a function at ExtractTextPlugin.apply (F:\workspacev\preliminary-study-of-webpack\node_modules\extract-text-webpack-plugin\dist\index.js:147:16)

解决方法：在webpack4.x中可以使用插件mini-css-extract-plugin

移除 extract-text-webpack-plugin插件后，安装mini-css-extract-plugin

配置webpack.config

const MiniCssExtractPlugin = require("mini-css-extract-plugin");

//修改css文件 loader配置
{
  test:/\.css$/,
  use:[MiniCssExtractPlugin.loader,'css-loader']
}

//插件
new MiniCssExtractPlugin({
  filename: '[name].css',
  chunkFilename: "[id].css"
})

当前打包出来结构

顺便贴出当前webpack.config文件 可进行核对

const path  =  require('path');
const entry = require("./entry_webpack");
const uglify = require('uglifyjs-webpack-plugin');
const htmlPlugin= require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports={
  mode:'development',
  //入口文件的配置项
  entry:entry.path,
  //出口文件的配置项
  output:{
    //打包的路径文职
    path:path.resolve(__dirname,'dist'),
    //打包的文件名称
    filename:'[name].js'

  },
  //模块：例如解读CSS,图片如何转换，压缩
  module:{
    rules:[
      {
        test:/\.css$/,
        use:[MiniCssExtractPlugin.loader,'css-loader']
      },
      {
        test:/\.(png|jpg|gif)/ ,
        use:[{
            loader:'url-loader',
            options:{
              limit:500000,
              esModule: false,
              outputPath:'images/'
            }
        }]
      },
      {
        test: /\.(htm|html)$/i,
        use:[ 'html-withimg-loader'] 
      }
    ]
  },
  //插件，用于生产模版和各项功能
  plugins:[
    new uglify(),
    new htmlPlugin({
      minify:{
        removeAttributeQuotes:true
      },
      hash:true,
      template:'./src/index.html'
    }),
    new MiniCssExtractPlugin({
      filename: '[name].css',
      chunkFilename: "[id].css"
    }),
  ],
  //配置webpack开发服务功能
  devServer:{
    //设置基本目录结构
    contentBase:path.resolve(__dirname,'dist'),
    //服务器的IP地址，可以使用IP也可以使用localhost
    host:'localhost',
    //服务端压缩是否开启
    compress:true,
    //配置服务端口号
    port:1717
  }
}

问题五 less，sass文件打包和mini-css-extract-plugin相关配置

less： 安装 less less-loader
sass：安装 node-sass sass-loader（装不上node-sass的同学，可以试试指定版本安装 node-sass@6.0.1）

配置

{
  test: /\.less$/,
  use:[MiniCssExtractPlugin.loader, 'css-loader', 'less-loader']
},
{
  test: /\.scss$/,
  use:[MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
}

问题六 自动处理css3属性前缀（添加-webkit-）

为了浏览器的兼容性，为了在每个浏览器运行必须加入-webkit,-ms,-o,-moz这些前缀。

安装postcss-loader 和autoprefixer

配置webpack.config

{
  test: /\.css$/,
  use:[MiniCssExtractPlugin.loader, {
    loader:'css-loader',
      options:{
        importLoaders:1
      }
  },'postcss-loader']
}

添加文件 postcss.config.js

module.exports = {
    plugins: [
        require('autoprefixer')
    ]
}

运行后发现 并没有起效

解决方案 autoprefixer webpack4.0+ 必须写浏览器

在pageage.json文件中添加

"browserslist": [
   "defaults",
   "not ie < 11",
   "last 2 versions",
   "> 1%",
   "iOS 7",
   "last 3 iOS versions"
 ]

运行生效

问题七 消除未使用的css

webpack3.x中使用 purifycss-webpack purify-css

安装配置后运行报错 compiler.plugin is not a function at Object.apply (F:\workspacev\preliminary-study-of-webpack\node_modules\purifycss-webpack\dist\index.js:48:16)

解决方案：

purifycss-webpack purify-css 必须与 extract-text-webpack-plugin 配合

与mini-css-extract-plugin相对应 插件purgecss-webpack-plugin

安装 purgecss-webpack-plugin glob-all

配置文件webpack.config

const glob = require('glob-all');    // 这里一定要安装glob-all这个插件而不是glob
const PurifyCSSPlugin = require('purgecss-webpack-plugin');

new PurifyCSSPlugin({       // css 文件去重
  paths: glob.sync([
    path.join(__dirname, './src/*.html'),
    path.join(__dirname, './src/*.js'),
    path.join(__dirname, './src/*.ts'),
  ],{
    nodir: true
  })
}),

打包后 index.html中无id为无效的dom

打包后css内无这段css

问题八 安装babel

安装 babel-core babel-loader babel-preset-es2015 babel-preset-react

yarn add babel-core babel-loader babel-preset-es2015 babel-preset-react
yarn add babel-preset-env

添加文件 .babelrc

{
    "presets":["react","env"]
}

配置文件 webapck.config

{
    test:/\.(jsx|js)$/,
    use:{
        loader:'babel-loader',
    },
    exclude:/node_modules/
}

报错Cannot find module '@babel/core’

注意babel的各个版本要统一。我把babel-loader版本从8.2.2到7.1.2就可以运行了

报错版本

成功版本

main.js

打包后js

以上目前踩坑问题
全代码git链接