我们接着昨天的webpack 的内容继续： 今天我们将说一下entry,output的配置以及mode配置，最后我将为大家说到的一个概念Source Map
我们先将昨天我们写的一个webpack的一个基本的配置放到这里:const path = require('path') // 该文件需要导出webpack的配置对象 module.exports = {entry: path.join(__dirname, "src/main.js"),output: {filename: "bundle.js",path: path.join(__dirname, "dist")} } 123456789' 我们昨天说到了，entry是webpack打包文件的入口，表明webpack将对那些文件进行打包，output则是webpack打包文件的出口，声明webpack打包的文件将会被放到哪里,其中我们也说到了output里面的两个参数的含义.现在我将说到的是output的第三个常用的参数的配置；publicPath我们可能有这样的需求，当我们的页面中需要引入的一些文件是网络上的文件资源，或者引入的是一些外部的文件，此时我们需要我们最终打包生成的页面文件久需要加上我们引入地址的前缀，此时就可以使用publicPath参数，它会在我们打包生成的页面进行文件引入的时候为我们的引入路径自动加上该引入的前缀：例: 我们配置 publicPath: “/” 则表示的是在引入的路径前加上"/" 这也是这个参数的默认的配置
*关于mode ，其实如它单词的含义，是一个模式的意思，表示的就是我们当前的打包配置使用什么模式进行打包， 参数值常设置为: “development” 和 “production” 分别表示的是开发模式下的打包和线上模式下的打包：
development模式下的打包的文件不会被压缩，会带上相应的注释内容方便开发过程的调试等等的操作，而production模式的打包的代码则会被压缩成一行代码。 文章最后附上今天处理后的webpack.config.js配置文件的代码:const path = require('path') module.exports = {mode: "development", // 还可以是productionentry: path.join(__dirname, "src/main.js"),output: {filename: "bundle.js",path: path.join(__dirname, "dist")},devtool: "cheap-module-eval-source-map" } 12345678910'
今天我们的webpack之旅就到这了，之前的博客中可能有些文字由于编写的手误敲错了一些文字，如果发现希望大家能够提出来我会及时加以改正的。下一次的webpack之旅我将为大家说到的是webpack打包之loader
