学习webpack（二）之 webpack配置

简述

当我们在终端中使用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/[email protected]@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奥秘的同学请关注我。
个人观点，不喜勿喷！！若有错误，希望能够指出，谢谢各位大神！！