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":""} } }