关于webpack一些注意事项

webpack

webpack-dev-server

resolve 文件扩展名可以省略

es6 -> es5 ( 优雅降级 )

1. 什么叫做优雅降级， 什么叫做渐进增强？

• 优雅降级指的是， 先进行高版本开发， 然后向下兼容
• 渐进增强指的是， 先进行低版本稳定开发， 然后在进行高版本技术的引用

2. css代码抽离（将src目录css文件打包到dist目录中， 并且会自动在index.html中引入link）

• 先安装
  cnpm i extract-text-webpack-plugin -D
• 在webpack.config.js中引入
  var ExtractTextWebpackPlugin = require('extract-text-webpack-plugin')
• 在css的loader转换器中进行使用

module: {
rules: [
{
test: /\.css$/,
use: ExtractTextWebpackPlugin.extract({
use:'css-loader'
})
}
]
},
plugins: [
new ExtractTextWebpackPlugin('css/[name]_[hash:6].css')
]

3. 图片打包

• base64 将数据量较小的图片（4K以下）转成 字符编码 ， 它可以减少http请求， 从而加快页面加载速度

4. 静态资源拷贝
5. 配置文件抽离

• 创建一个config目录，然后在里面新建两个webpack配置文件
• webpack.config.dev.js
• webpack.config.prod.js
• 修改package.json中npm脚本命令

"dev": "webpack --mode development --config config/webpack.config.dev.js",
"build": "webpack --mode production --config config/webpack.config.prod.js",
"server": "webpack-dev-server --mode development --config config/webpack.config.dev.js"

• 修改配置文件中的路径，
• 将相对路径， 修改为 磁盘路径

6. 错误资源定制
7. 精确找到错误源代码位置
   devtool: 'source-map'