webpack三探-entry、ouput、sourceMap、自动打包

hline

2020-02-03

entry、ouput：

当我们需要打包多个js文件时，需要在entry中增加入口：

entry:{
    main:‘./src/index.js‘,
    sub:‘./src/index.js‘
},

如果存在相同入口，就需要在ouput中进行区分，以下写死命名就会报错：

output:{
    filename:‘main.js‘,
    path:path.resolve(__dirname,‘dist‘)       // __dirname指的是webpack.config.js文件所在目录的路径
}

这时需要使用某些占位符，如：name

output:{
    filename:‘[name].js‘,
    path:path.resolve(__dirname,‘dist‘)       // __dirname指的是webpack.config.js文件所在目录的路径
}

如果我们打包生成的js文件需要放在cdn上，也就是说打包出来的html中前面要加上cdn地址：

<script type="text/javascript" src="http://cdn.com/main.js"></script>

可以做如下配置：

output:{
    publicPath:‘http://cdn.com‘,
    filename:‘[name].js‘,
    path:path.resolve(__dirname,‘dist‘)       // __dirname指的是webpack.config.js文件所在目录的路径
}

sourceMap：

它是一个映射关系，可以映射出实际出错的位置，需要在webpack中进行配置：

devtool:‘source-map‘

配置了sourceMap会导致打包变慢，因为它要在打包过程中构建映射关系。在dist目录下会多出一个main.js.map文件，里面存在这映射关系。

还可以配置成：

devtool:‘inline-source-map‘

使用以上配置我们会发现map文件不见了，但是还可以看到具体的出错位置，是因为映射文件直接以base64的形式打包到main.js中了。

还可以配置成：

devtool:‘cheap-inline-source-map‘

当不使用cheap的时候会告诉我们报错我们行和具体列，使用了cheap的时候只会告诉我们具体在哪一行出错，能在大项目中显著提升性能。

以上配置都只管具体业务中的代码错误，而当我们还需要管loader、第三方模块等的错误的时候，还需要加‘module‘：

devtool:‘cheap-module-inline-source-map‘

还有一种形式：

devtool:‘eval‘

会将代码以eval的形式来生成sourceMap的对应关系，执行效率最快，性能最好的打包方式。但是针对比较复杂的业务，可能提示的错误不太全面。

在开发环境中推荐使用：

mode:‘development‘,
devtool:‘cheap-module-eval-source-map‘

在生产环境中推荐使用：

mode:‘production‘,
devtool:‘cheap-module-source-map‘

在上面哪些配置中，当我们修改业务中的代码想看效果的时候都需要重新打包，并刷新页面，那么我们如何能改变代码以后自动重新生成呢？下面有3个方案：

（1）在package.json中进行配置：

"scripts": {
    "watch": "webpack --watch"
}

加上--watch之后，当我们修改业务中的代码就会自动重新打包，但是还需要重新刷新页面才能呈现修改后的结果

（2）webpackDevServer

在webpack.config.json中进行配置：

devServer:{
    contentBase:‘./dist‘        // 打开dist下的index.html文件
}

在package.json中进行配置：事先需要安装webpack-dev-server

"scripts": {
    "start": "webpack-dev-server"
}

然后启动npm run start

这个时候我们在浏览器中输入 localhost:8080 就可以打开我们的项目，而且当我们修改业务代码时候会自动重新打包并刷新页面
当我们加一个配置：

devServer:{
    contentBase:‘./dist‘,        // 打开dist下的index.html文件
    open:true
}

这个时候当我们运行 npm run start 的时候就会自动打开页面
proxy配置：

devServer:{
    contentBase:‘./dist‘,
    open:true,
    proxy:{
        ‘/api‘:‘http://localhost:8080‘
    }
}

当我们使用如上proxy配置，使用api路径发起ajax请求的时候会自动转发到localhost:8080，像VUE、React都能支持proxy，底层原理都是使用了webpackDevServer，webpackDevServer本身就支持跨域的代理
配置端口号：

devServer:{
    contentBase:‘./dist‘,        // 打开dist下的index.html文件
    open:true,
    port:8090
}

（3）自己写node服务

hline

0 关注 0 粉丝 0 动态

关注关注

安科网

webpack三探-entry、ouput、sourceMap、自动打包

hline

hline

hline