Webpack系列——基础配置

Entry与Output的基础配置

module.exports = {
    ...
    entry: {
        main: './src/index.js',
        sub: './src/index.js'
    },
    ...
    output: {
        filename: '[name].js', // 输出文件的名称
        path: path.resolve(__dirname, 'dist')
    }
}

index.html

...
<script src="bundle.js"></script>
...

配置publicPath，设置打包注入到html中时的前缀路径

output: {
    publicPath: 'https://cdn.com.cn'
    filename: '[name].js', // 输出文件的名称
    path: path.resolve(__dirname, 'dist')
}

打包生成的 index.html

...
<script src="https://cdn.com.cn/main.js"></script>
...

sourceMap

sourceMap 是一个映射关系，打包的代码 --> 源代码，如果不用 source-map 只能看到错误所在的打包文件生成的代码位置，使用后可以定位到源代码位置

module.exports = {
    ...
    mode: 'development',
    devtool: 'source-map'
    ...
}

source-map: 打包后会在 dist 文件生成一个map文件；

inline-source-map: 打包后，map数据是base64的数据会以 dataUrl 的形式内嵌到打包生成的文件中；

cheap-inline-source-map: 当代码量很大时，代码出现错误，devtool 不是 cheap-*前缀，source-map 会报错代码错误位置的行数及列数，但是实际上，一般的说这样的映射比较耗费性能，加上 cheap前缀后只会显示代码报错的行数位置，打包的性能会得到一定的提升，并且cheap前缀加上后只会处理业务代码的映射，不会管引入的第三方库、模块等。

如果希望同时管自身的业务逻辑代码，第三方的模块, Loader可以加上module，如： cheap-module-inline-source-map

eval是打包速度最快、性能最好的一种方式，但是如果是代码很复杂，eval提示出来的代码并不是很全面

开发环境中建议使用：cheap-module-eval-source-map模式，提示出来的错误比较全，打包速度也比较快

在生产环境中，没有必要source-map的映射，如果实在需要的话可以使用cheap-module-source-map模式

module.exports = {
    ...
    mode: 'production',
    devtool: 'nosources-source-map'
}