webpack4【guides说明2】

import/export 语法虽然在es2015中被标准化了，但目前大部分浏览器中还未支持。然而webpack提供了自己的一套解决方案。

通常webpack会自动转换一下（模块引入，导出部分的）代码，这样转换后的代码既可以运行在老的浏览器上，也能运行在比较新的浏览器上。如果你查看一下之前产生的main.js文件，你会发现webpack是怎么做到的，（前面产生的文件是uglify后的文件，不易阅读，待后面介绍完配置文件后，将mode设置为development，再打包就会发现生成的打包文件没有被丑化处理，再查阅）。值得注意的是，webpack不会更改除了 import /export 语句之外的任何代码，所以你再使用es2015语法或者特性的时候，为了兼容多种浏览器，需要使用到 一些转换器 如 Babel，那么webpack如何使用转换器？后面会介绍到 webpack的loader系统。

 

到了webpack4，webpack并不需要啊任何配置，但是绝大部分项目需要一个更灵活的设置的方式，所以webpack也支持使用配置文件的方式，这比在命令行输入许多的选项有效的多

新建一个webpack.config.is文件在项目根目录下

创建好了webpack.config.js文件后，运行npx webpack打包

打包发现提示错误，output.path不是绝对地址，修改一下即可

发现ll目录下生成了一个main.js文件，将path调整到dist目录下，并添加mode:"development",再看看此时main.js内容

就没有经过丑化处理了

 

除了在命令行下使用npx webpack/ node_modules/bin/webpack 方式打包外，我们还可以在package.json文件的scirpt字段里面定义一些自己的npm命令，如下：

scripts字段value内增加一个键（随便取名，这里叫build，意思是打包），值为运行相关npm命令时 对应真正执行的shell命令，那么这一个键值对就对应了一个npm命令了，于是我们在命令行中就可以运行，npm run （键名）build 来执行响应shell了。另外有个情况就是npm start ，如果键名有定义为start的，命令行中输入就不需要用npm run start了，直接使用npm start就可以了。

那么这样看来，目前使用 项目本地webpack打包就有3种方式了。