The basic usage webpack3,4

The basic use of webpack

---

webpack installation

1. Need the help node environment of use webpack
2. Npm automatically downloaded this package management tool in the node, after which the operation we need to use npm package management tools related operations
3. We need to open a terminal (cmd) or compiler terminal (I'm using vs code compiler, using the ctrl + shift + ~open terminal)
4. Input npm install webpack -gto the global download webpack, -g represents the global installed.
5. After downloading the good input terminal webpack -versionto see version webpack, if the version information appears, the installation was successful
   Note: there will be slight differences webpack version in subsequent operations, I am here to download the wepack4.x version, the following talk, I'll webpack3.x version 4.x versions and a little talk about differences

6. If webpack a 4.x version, in addition to the global installed webpack also need to look at this global install some follow-up questions webpack-cli to be installed above the fourth step is similar to steps

   The basic usage webpack

7. I assume that the directory is as follows: the presence of the inlet and js file folder main.js src folder, there is a folder js aaa.js file, each file code is as follows

• aaa.js

    function add(num1 , num2) {
      return num1 + num2;
    }

    function mul(num1 , num2) {
      return num1 * num2;
    }
    export {add,mul};   // ES6导出模块

• main.js

    import {add,mul} from './js/aaa.js' // ES6的语法导入模块
    console.log(add(20,30));
    console.log(mul(20,30));

1. After the above-mentioned learned dependency, we need to package files. Note: To access webpack package is to be effective on a server, or the browser will complain
2. Dependencies right after the confirmation code, the input terminal
   • webpack3.x version:webpack .\src\main.js .\dist\bundle.js
   • webpack4.x version: webpack .\src\main.js -o .\dist\bundle.js --mode=development
     The above code means: by webpack the .\src\main.jspackage main.js files in this directory to the dist folder named bundle.js
3. If in the future after the code is modified, it must be re-packaged again, namely: The third step is performed once again
4. This time might think this operation is very complicated, and thus we will further improve the code
5. Perform terminal operations: npm init -yinitialize a json file that is necessary, after downloading the package which will be recorded in
   Note: If you use the name of the above initializes the json file, package.json the name value of the project, we can not the name attribute value is set here for the Chinese, it is recommended to use npm init way package.json initialization file, so that the benefits can customize the name value of the property, it is not Chinese
6. Input terminal: npm install path --save-devto download path module in the development environment (to facilitate later use)
7. Webpack.config.js create a new file, note: The name of this file is fixed, do not change yourself , enter the code in the file:

    const path = require('path');   // 导入之前的下载好的模块
    module.exports = {
        // 在配置文件中，手动指定 入口 文件和 出口 文件
        mode:'development',   //  webpack4.x版本中需要加入这个属性
        entry:'./src/main.js',  //  入口文件
        output:{  //  出口文件
            path:path.resolve(__dirname,'dist'),  //  指定将要打包好的文件应该要输出到哪个地方去（注意：路径必须是绝对地址）
            filename: 'bundle.js' //  指定输出文件的文件名
        }
    }

Note: If the output of the path you enter is ./dist then will complain because the path here is not allowed to use relative address, you must use an absolute address, you need to use node in the path module

1. After finishing the above operation, the input to the terminal: webpackPacked file
2. Open package.json file, found in the file scriptsattributes, which represent this script commands, we add a custom command in the object, such as: property called: build, property value webpack.
3. Then we can enter in a terminal: npm run buildPacked file
   Note: webpack used in the terminal is used globally in webpack, and webpack used in scripts object will prefer to use local. We generally use local webpack, so we want to use download npm local webpack. If it is version 4.x WebPACK also need to download webpack-cli, code is as follows:
   npm install webpack --save-dev wherein is a save-dev-dependent development, namely: WebPACK required in the development, and then the project does not require the use of the line. It will show you develop dependence downloaded files package.json file devDependencies in.