Webpack3.x with some of the problems encountered in the tutorial to learn webpack4.X, and summary

JS
JS jsx.coffee. TS (the typescript class C # language) CSS
.css the .less .sass .scss ImagesRF Royalty Free
JPG .png .bmp .gif .svg
font files (Fonts).
.Svg .ttf EOT .woff.woff2
template file.
ejs .jade .vue [this is the way webpack defined components, such use is recommended]

"Static resource page introduced more after what Question 1, page load speed is slow, because we want to launch a lot of secondary request;???
2. To deal with complex dependencies

How to solve the above two problems 1, combined, compressed, sprite, Base64-encoded image
2 may be used requirelS learned before, may be used webpack solve complex dependencies between individual packets;

What is webpack webpack is a front-end project build tool, which is based Nodejs developed a front-end tool?;

How perfect realization of the above two kinds of solutions
1, using Gulp, it is based on the task task;.
2. Webpack, is built on the entire project;

Build automation tools by means of webpack the front end, you can achieve the perfect merger of resources, packing, compression, confusion, and many other functions. Introduction webpack the process of packing the picture according to the official website of
webpack official website

4.X versions need to install a global install webpack and webpack-cli rather than individual webpack

In package.json in the "scripts": Join

  "build": "webpack --mode production"

webpack-dev-server command Format : webpack 要打包的文件的路径 -o 打包好的输出文件的路径Note: Before herein without intermediate 4.x-o

webpack can do something ???

• webpack can process file Js interdependence;

• webpack Js can handle compatibility issues, the senior, the browser is not another syntax, turned lower, the browser can properly identify syntax
  command format just running: webpack 要打包的文件的路径 -o 打包好的输出文件的路径Note: the middle here without prior 4.x-o

• Webpack-dev-server use this tool to automatically package compiled function
  1. Run npm i webpack-dev-server -D install this tool to local development projects dependent

  2. After installation, the use of this tool, and usage webpack commands, exactly the same

  3. Since we are in the project, locally installed webpack-dev-server, therefore, you can not treat it as a script commands, run powershell directly in the terminal; (install only those tools to the global -g to the terminal in normal execution)
  4. Note: webpack-dev-server tool, if you want to normal operation, requiring, in the local project, you must install webpack

  5.webpack-dev-server package to help us generate the bundle.js file, and not to the actual physical storage disks; instead hosted directly to the computer's memory,
  so we in the project root directory, could not find the packaged bundle.js;
  6. We can think, webpack-dev-sezver the packaged file, in order to form a virtual hosting to the root of our project, although we can not see it,
  however, it is believed, and dist szc node-modules level level, there is an invisible file called bundle.js

In setting mode webpack.config.js mode: 'development', will not be provided if the warning word yellow, hot: trueheat update 4.X like also enabled by default, do not individually configured
wherein url-loader to

{
                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]'
                }
            },

Wherein babel-loader version after the installation package to the following 8.X

必须安装的包如下：

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

Adding .babelrc profile, and wrote the following configuration information in the file, is now

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

Use vue-loader: When "^ 15.XX", will complain

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

Top encounter wrong, do not panic, but also the lack of two configurations. Because [email protected] version, some things must be configured.
Add the following

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