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

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服务

上一篇:webpack (七) -配置sourceMap——为了更容易地追踪代码错误和警告


下一篇:webpack(二)之source-map(一)