webpack34的基本的使用方法

Posted 2020-11-22 liuyilong

webpack的基本使用

---

webpack的安装

1. webpack的使用时需要借助 node 的环境的
2. 在 node 中自动下载了 npm 这个包管理工具，之后的操作我们需要使用npm包管理工具进行相关操作
3. 我们需要打开终端（cmd）或者编译器中的终端（我使用的vs code编译器，使用 ctrl + shift + ~ 打开终端）
4. 输入 npm install webpack -g 即可在全局下载 webpack,-g表示全局安装。
5. 下载好之后在终端输入 webpack -version 即可查看webpack的版本，如果出现版本信息，则表示安装成功
   注意：webpack的版本的不同在后续的操作中会存在些许差异，我这里下载的是 wepack4.x版本的，下面的讲述中我会将webpack3.x版本和4.x版本的些许差别讲一下

6. 如果是webpack是4.x版本的话，除了全局安装 webpack 之外还需要全局安装一下 webpack-cli 这样后续有些问题才能进行，安装步骤如上述第四步类似

   webpack的基本用法

7. 假设我的目录中是这样的：src文件夹下存在入口文件main.js和js文件夹，js文件夹中还有一个aaa.js文件，各个文件的代码如下

• 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. 了解到上述的依赖关系之后，我们便需要打包文件了。注意：webpack打包后是要在服务器上访问才能有效，不然浏览器会报错
2. 确认代码中的依赖关系没错之后，在终端输入
   • webpack3.x版本：webpack .srcmain.js .distundle.js
   • webpack4.x版本：webpack .srcmain.js -o .distundle.js --mode=development
     上面的代码意思为：通过webpack将 .srcmain.js 该目录下的main.js文件打包到 dist文件夹下的，命名为bundle.js
3. 如果将来修改了代码之后，则必须重新打包一遍，即：再执行一次第三步
4. 这个时候可能就会觉得该操作很繁琐，于是乎我们将进一步改进代码
5. 在终端执行操作：npm init -y 初始化一个json文件，该文件非常有必要，之后下载包都会记录在其中
   注意：如果使用上面的方式初始化的json文件，则package.json的name值为项目的名称，我们不能将这里的name属性值设置为中文，所以建议使用 npm init 的方式初始化package.json文件，这样的好处是可以自定义name属性的值，不能是中文
6. 在终端输入：npm install path --save-dev即可在开发环境下下载path的模块（方便后面使用）
7. 新建一个webpack.config.js文件，注意：这个文件的名称是固定的，不要自己更改，在文件中输入代码：

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

注意：如果在output中的path中您输入的是 ./dist 的话会报错，因为这里的path不允许使用相对地址，必须使用绝对地址，则需要借助 node 中的 path 模块

1. 做完上述操作之后，即可在终端输入：webpack打包文件
2. 打开package.json文件，在文件中找到scripts的属性，这里面表示脚本命令，我们在该对象中添加一个自定义的命令，如：属性名为：build，属性值为 webpack。
3. 然后我们便可以通过在终端输入：npm run build打包文件
   注意：在终端中使用的webpack是使用的全局中的 webpack，而在 scripts 对象中使用的 webpack 会优先使用本地的。我们一般使用本地的webpack，所以，我们要使用 npm 下载本地的webpack。如果是4.x版本的webpack还需要下载 webpack-cli，代码如下：
   npm install webpack --save-dev其中 save-dev 是表示开发中依赖，即：在开发中需要使用webpack，而项目上线之后不需要使用了。在 package.json 文件中的 devDependencies 中会显示你下载过的开发依赖的文件。