学习webpack（二）之 webpack配置

我不是女神ヾ 2022-04-03 14:20 339阅读 0赞

#### 简述 ####

> 当我们在终端中使用webapck命令时，默认首先查找是否存在webpack.config.js文件，如果存在，就使用这个文件中的配置；如果不存在，就使用终端上你输入的命令。因此，我们可以在项目中创建一个webpack.config.js文件，然后在终端直接输入webpack命令完成打包任务。

#### webpack.config.js ####

在上一篇我们已经知道，webpack分为四个部分，入口（entry）、出口（output）、转换器（loader）、插件（plugins）;所以在创建webpack.config时我们可以在该文件中指定webpack的入口和出口文件，如下：

module.exports = {
        // 入口文件
        entry :'./index.js',
        // 出口文件
        ooutput:{
            path:__dirname+'/dist',
            filename:'index.js'
        }
    }

> 有的同学可能有点疑惑，不知道‘\_\_dirname’这个是干什么的。这是node中提供的一个变量,表示的是当前文件夹的绝对路径。还有一个变量为\_\_filename，表示的是当前文件的绝对路径。

添加完成后，打开终端，输入webpack命令,按回车等待打包完成：

> webpack

细心的同学可能会发现，打包完成后，有一串黄色的警告信息。看过上一篇的同学应该知道，这是因为没有配置mode打包环境。在webpack命令行可以通过–mode 《环境名称》来添加打包环境，在webpack.config文件中同样可以通过配置mode添加相应的打包环境。

module.exports = {
        // 打包环境 development:开发环境 production：生产环境
        mode：'development',
        // 入口文件
        entry :'./index.js',
        // 出口文件
        ooutput:{
            path:__dirname+'/dist',
            filename:'index.js'
        }
    }

之后再在终端执行webpack就不会再出现黄色的警告信息了。  
当然我们还可以对代码进行一下优化，我们可以请求一个path模块，他提供了一个resolve的方法，这个方法可以将两个路径拼接起来。

const path = require('path');
    // path.resolve(__dirname,'dist') 相当于 __dirname + '/dirname'
    module.exports = {
        mode : 'development',
        entry : './index.js',
        output:{
            path : path.resolve(__dirname,'dist'),
            filename：'index.js'
        }
    }

#### 支持ES6语法，babel-loader ####

如今，ES6新增的一些特性，大大的提高了前端人员的开发效率。所以为了响应潮流（我猜的），webpack可以通过babel-loader将es6语法转换成大部分浏览器都支持的es5语法。

##### babel-loader安装 #####

> npm install babel-loader babel-core -D

将babel-loader安装到开发依赖中，安装好之后打开webpack的配置文件，在文件中添加module项,在module想中添加rules规则，这个规则是用来匹配指定文件，然后使用相应的转换器将文件转换成我们想要的格式。

module.exports = {
        ...    
        module:{   
            rules:[
                {
                    test:/\.js$/,  // 用来匹配文件，可以使用正则表达式
                    use:'babel-loader' // 使用的loader，如果使用多个loader的话可以使用数组的形式。
                }        
            ]
        }
    }

安装好babel-loader后，在终端输入webpack命令启动，有的同学可能会遇到一个报错信息，

> ERROR in ./index.js  
> Module build failed (from ./node\_modules/\_babel-loader@8.0.4@babel-loader/lib/index.js):  
> Error: Cannot find module ‘@babel/core’  
> babel-loader@8 requires Babel 7.x (the package ‘@babel/core’). If you’d like to use Babel 6.x (‘babel-core’), you should install ‘babel-loader@7’.  
> at Function.Module.\_resolveFilename (internal/modules/cjs/loader.js:580:15)  
> at Function.Module.\_load (internal/modules/cjs/loader.js:506:25)  
> at Module.require (internal/modules/cjs/loader.js:636:17)

这时候不用紧张，这是因为没有安装@babel/core，只需要安装上这个模块就好了。

> npm install @babel/core -D

这样就可以直接使用ES6语法了。

webapck还可以指定多个入口文件，只需要在entry属性改为对象写法，

module.exports = {
        entry : {
            a: 'index.js',
            b:'demo.js'
        }
    
    }

#### 脚本执行 ####

我们执行webpack打包都是在终端里面输入webpack命令，如果我不想输入这个命令，想要换其他的命令怎么办？不用担心，呃我们只需要在package.json文件中配置script脚本即可。

"scripts": {
         "dev":"webpack"
       }

这样我们就可以在终端上通过npm直接运行webpack。

> npm run dev 或者 npm dev

#### 结语 ####

> 这一篇我们主要就是了解一下webapck的简单配置，后期会单独讲解每一模块之间的知识点，以及结合着vue和react脚手架创建的项目中的webpack配置讲解，想要一起探寻webpack奥秘的同学请关注我。  
> 个人观点，不喜勿喷！！若有错误，希望能够指出，谢谢各位大神！！