webpack 学习资源分享

以下是我个人的 webpack 学习资源总结。

webpack 官网

https://github.com/webpack/webpack

https://webpack.js.org/ 文档

https://webpack.github.io/

https://github.com/wesbos/Learn-Redux 一个 demo 有 webpack 例子

资源

https://github.com/webpack-contrib/awesome-webpack

https://github.com/webpack-china/awesome-webpack-cn

https://github.com/kraaas/webpack-tutorial-collection

教程

https://webpack.js.org/concepts/ 四个概念

https://github.com/ruanyf/webpack-demos

http://www.jianshu.com/p/42e11515c10f 入门 Webpack，看这篇就够了

rails

https://github.com/rails/webpacker

https://github.com/shakacode/react-webpack-rails-tutorial 有很多例子可以看

http://pixelatedworks.com/articles/embracing-change-rails51-adopts-yarn-webpack-and-the-js-ecosystem/

loaders

https://github.com/webpack-contrib/css-loader

https://github.com/webpack-contrib/style-loader

https://github.com/shama/stylus-loader

https://github.com/webpack-contrib/extract-text-webpack-plugin 利用上面两个生成 css 文件，不然会嵌入 js 中

https://github.com/babel/babel-loader

https://github.com/webpack-contrib/file-loader

插件

https://github.com/johnagan/clean-webpack-plugin

https://github.com/jantimon/html-webpack-plugin

https://github.com/baldore/open-browser-webpack-plugin 打开浏览器

web dev server

https://webpack.js.org/configuration/dev-server/

production

https://webpack.js.org/guides/production-build/

可视化

webpack --json > stats.json

http://webpack.github.io/analyse/

http://chrisbateman.github.io/webpack-visualizer/

优化

https://github.com/gajus/prepack-webpack-plugin

webpack 看我就够了（三）http://www.jianshu.com/p/b5248d441d9e

location / {
    root /var/www;
    index index.html;

    try_files $uri $uri/ /index.html;
}

# 产品编译及压缩
# https://webpack.js.org/guides/production-build/
webpack -p

# 线上环境产生文件名带md5的文件
# https://webpack.js.org/guides/caching/

output: {
  path: path.resolve('dist'),
  filename: '[name].[chunkhash]_bundle.js'
}

# 打包md5 cache的问题
# https://gist.github.com/clinyong/b28ff4a8fa7906d01723

完结。