The basic use webpack

This article is based on a common method on webpack, you want to know more deeper code can view the official website webpack

https://www.webpackjs.com/

Here is finishing webpack own mind map can quickly understand the use and purpose of webpack

build the project file directory

1, webpack build a local server

npm install --save-dev webpack-dev-server
加入到webpack的配置文件（webpack.config.js）
 devServer: {
    contentBase: "./public",//本地服务器所加载的页面所在的目录
    historyApiFallback: true,//不跳转
    inline: true//实时刷新,
    Port:9090//不写默认是8080
  } 
在package.json中的scripts对象中添加如下命令，用以开启本地服务器：
"server": "webpack-dev-server --open"

2, using the Loaders
the Loaders webpack is one of the most exciting features provided by the.
By using different loader, webpack have the ability to call external scripts or tools to implement the processing of files in different formats, such analysis is converted scss css, or the next generation of JS files (ES6, ES7) converted to a modern browser JS-compatible file.
Loaders require separate installation and need to be configured in modules in webpack.config.js keywords
webpack configuration loader has two goals:

1. test for a property match loaders expand the name of the file being processed regular expression (must)
2. When use attribute of the conversion, which should loader use.
   loader: loader name (must)
   . 3, the include / the exclude: file must be added manually processed (folder) or block are not processed (folder) (optional);

module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' }
    ]
  }

The meaning of the above configuration information:
WebPACK compiler, when you encounter '() / import statements require being resolved to' .txt 'path', before you pack it, first convert it to use raw-loader. "

3, Babel
Babel is actually a compilation of JavaScript platform, it can help you compile the code to achieve the following objectives:

• So you can use the latest JavaScript code (ES6, ES7 ...), and do not control whether the new standard is fully supported currently used browser;
• So you can use the JavaScript-based language has been expanded, such as React's JSX;
  Babel is actually several modular package, its core function is located npm package called babel-core in, webpack can put it in a different package integration used together, for each function or expand your need, you will need to install a separate package (most used is resolved Es6 of babel-env-preset package and resolve JSX of babel-preset-react package).
  Mounting a plurality of disposable npm // dependent modules, with a space between the modules

npm install --save-dev babel-core babel-loader babel-preset-env babel-preset-react
// 配置Babel、允许使用ES6以及JSX的语法
module: {
rules: [
{
    test: /(\.jsx|\.js)$/,
    use: {
        loader: "babel-loader",
        options: {
            presets: [
                "env", "react"
            ]
        }
    },
   exclude: /node_modules/
}
]
}
*****babel-loader和babel-core版本要相邻不然会报错*****
babel-loader 8.x对应babel-core 7.x
babel-loader 7.x对应babel-core 6.x