webpack学习

require.resolve('jquery')  获取jquery的绝对路径

css-loader 用来解析处理css文件中的url路径，把css文件变成一个模块

style-loader 可以把css文件变成style标签插入head中

file-loader 解析地址，把文件从源位置拷贝到目标位置并修改原引用地址

 

devtool: 'source-map', // 单独文件，可以定位到哪一列出错了

devtool: 'cheap-module-source-map', // 单独文件，体积更小，但只能定位到哪一行出错了

devtool: 'eval-source-map' // 不会生成单独文件，可以定位到哪一列出错了

devtool: 'cheap-module-eval-source-map' // 不会生成单独文件，体积小，只能定位到行

------------------------------------------------------------------- 

wach: 当代码发生修改后可以自动重新编译

watch: true,
watchOptions: {
    ignored: /node_modules/, //忽略不用监听变更的目录
    poll:1000, //每秒询问的文件变更的次数
    aggregateTimeout: 500, //防止重复保存频繁重新编译,500毫秒内重复保存不打包
}

--------------------------------------
copy-webpack-plugin   拷贝静态文件

new CopyWebpackPlugin([{
  from: path.resolve(__dirname,'src/assets'),//静态资源目录源地址
  to:path.resolve(__dirname,'dist/assets') //目标地址，相对于output的path目录
}])
------------------------------------

clean-webpack-plugin 打包前先清空
new CleanWebpackPlugin([path.resolve(__dirname,'dist')])

----------------------------------------
服务器代理proxy

proxy: {
    "/api": {
       target: 'http://localhost:3000',
       pathRewrite:{"^/api":""}        
    }            
}

转载于:https://www.cnblogs.com/tengrl/p/10272415.html