学习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/_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.js15)
at Function.Module._load (internal/modules/cjs/loader.js25)
at Module.require (internal/modules/cjs/loader.js17)
这时候不用紧张，这是因为没有安装@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奥秘的同学请关注我。
个人观点，不喜勿喷！！若有错误，希望能够指出，谢谢各位大神！！
淩亂°似流年
今天药忘吃喽~
快来打我*
野性酷女
小灰灰
还没有评论，来说两句吧...