用webpack3.x教程学习webpack4.X中遇到的一些问题，及总结

JS
js jsx.coffee. ts ( TypeScript类C#语言) CSS
.css .less .sass .scss Images
jpg .png .gif .bmp .svg
字体文件(Fonts).
.svg .ttf eot .woff.woff2
模板文件 .
ejs .jade .vue 【这是在webpack中定义组件的方式,推荐这么用】

"网页中引入的静态资源多了以后有什么问题? ? ? 1,网页加载速度慢,因为我们要发起很多的二次请求;
2.要处理错综复杂的依赖关系

如何解决上述两个问题 1,合并、压缩、精灵图、图片的Base64编码
2可以使用之前学过的requirelS、也可以使用webpack可以解决各个包之间的复杂依赖关系;

什么是webpack? webpack是前端的一个项目构建工具,它是基于Nodejs开发出来的一个前端工具;

,如何完美实现上述的2种解决方案
1,使用Gulp ,是基于task任务的;.
2.使用Webpack,是基于整个项目进行构建的；

借助于webpack这个前端自动化构建工具,可以完美实现资源的合并、打包、压缩、混淆等诸多功能。 根据官网的图片介绍webpack打包的过程
webpack官网

4.X版本中需要安装全局安装webpack 和webpack-cli 而不是单独webpack

在package.json中的"scripts":加入

  "build": "webpack --mode production"

webpack-dev-server命令格式: webpack 要打包的文件的路径 -o 打包好的输出文件的路径 注意：这里4.x之前中间不加 -o

webpack可以做什么事情???

• webpack能够处理Js文件的互相依赖关系;

• webpack能够处理Js的兼容问题,把高级的、浏览器不是别的语法,转为低级的,浏览器能正常识别的语法
  刚才运行的命令格式: webpack 要打包的文件的路径 -o 打包好的输出文件的路径 注意：这里4.x之前中间不加 -o

• 使用webpack-dev-server这个工具,来实现自动打包编译的功能
  1.运行npm i webpack-dev-server -D把这个工具安装到项目的本地开发依赖

  2.安装完毕后,这个工具的用法,和webpack命令的用法,完全一样

  3.由于,我们是在项目中,本地安装的webpack-dev-server , 所以,无法把它当作脚本命令, 在 powershell终端中直接运行; (只有那些安装到全局-g的工具,才能在终端中正常执行)
  4,注意: webpack-dev-server这个工具,如果想要正常运行,要求,在本地项目中,必须安装webpack

  5.webpack-dev-server帮我们打包生成的bundle.js文件,并没有存放到实际的物理磁盘上;而是直接托管到了电脑的内存中,
  所以,我们在项目根目录中,根本找不到这个打包好的bundle.js;
  6．我们可以认为, webpack-dev-sezver把打包好的文件,以一种虚拟的形式,托管到了咱们项目的根目录中,虽然我们看不到它,
  但是,可以认为,和dist szc node-modules 平级,有一个看不见的文件叫做bundle.js

设置mode webpack.config.js中mode: 'development',不设置的话会出黄色字警告，hot: true 热更新在4.X中也默认开启就好了，不用单独配置
其中url-loader改为

{
                test:/\.(jpg|png|gif|bmp|jpeg)$/,
                loader:'url-loader',   //配置处理图片路径文件的第三方loader规则 需要添加npm i url-loader file-loader -D
                options: {
                    limit: 10000,
                    // limit给定的值,是图片的大小,单位是byte , 如果我们引用的图片,大于或等于给定的 limit值,
                    // 则不会被转为base64格式的字符串,如果图片小于给定的limit值,则会被转为 base64的字符串
                    name: '[hash:8]-[name].[ext]'
                }
            },

其中babel-loader版本为8.X以后安装的包改为如下

必须安装的包如下：

	@babel/core
    @babel/plugin-proposal-class-properties
    @babel/plugin-transform-runtime
    @babel/preset-env
    @babel/preset-react
    @babel/runtime

添加.babelrc配置文件，并在该文件中写下如下配置信息，现在改为

　　{
    "presets": [
        "@babel/preset-env"
    ],
    "plugins": [
        "@babel/plugin-transform-runtime",
        "@babel/plugin-proposal-class-properties"
    ]
}

使用vue-loader："^15.X.X"时，会报错

vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config.

遇到上边的错，不用慌，还缺少两个配置。因为在[email protected] 版本，有些东西必须要配置。
添加如下

 const { VueLoaderPlugin } = require('vue-loader');
……
plugins: [
        new VueLoaderPlugin(),
    ],