webpack 2/3 new & npm clean

[xgqfrms-GitHub]

webpack2 new

webpack2 & npm clean

https://www.npmjs.com/package/rimraf

rimraf

https://github.com/isaacs/rimraf

The UNIX command rm -rf for node.

// API

rimraf(f, [opts], callback)

https://en.wikipedia.org/wiki/Rm_(Unix)

$ rm -rf

$ rm -rf


# rm === remove

# -r === recursive

# -f === force

https://gist.github.com/xgqfrms-GitHub/f71453cff397181ad927c5217ec9b7e4

<script>
    {
        "scripts": {
            "build": "webpack",
            "clean": "rimraf ./dist/*",
            "dev": "webpack-dev-server",
            "prod": "npm run clean && webpack -p"
        }
    }
</script>



<script>
    {
        "scripts": {
            "build": "webpack",
            "dev": "webpack",
            "prod": "npm run clean && webpack -production"
        }
    }
</script>

webpack2 & npm clean & rimraf

https://www.npmjs.com/package/rimraf

https://github.com/isaacs/rimraf

https://www.npmjs.com/package/gulp-clean

https://www.npmjs.com/package/gulp-clean-css

https://www.npmjs.com/package/clean-webpack-plugin

https://www.npmjs.com/package/friendly-errors-webpack-plugin

https://www.npmjs.com/package/webpack-cleanup-plugin

https://gist.github.com/xgqfrms-GitHub/f71453cff397181ad927c5217ec9b7e4

https://gist.github.com/xgqfrms-GitHub/19829c5d830ea4b2fe0c6ef5a622a1f5

https://github.com/stanzhai/be-a-professional-programmer

https://github.com/kpaxqin/react-from-scratch

https://github.com/zpao/building-react-from-scratch

https://github.com/reactjs/express-react-views

https://github.com/zpao/qrcode.react

https://github.com/facebook/draft-js

<QRCode
    value={"https://www.xgqfrms.xyz/"}
    size={320}
    bgColor={"#00ff80"}
    fgColor={"#ff00ff"}
    level={"L"}
/>

https://zpao.github.io/qrcode.react/

https://www.xgqfrms.xyz/

https://facebook.github.io/react/docs/optimizing-performance.html#use-the-production-build

https://facebook.github.io/react/contributing/implementation-notes.html

https://github.com/kpaxqin/react-from-scratch

https://kpaxqin.github.io/

https://kpaxqin.github.io/blog/2016/03/13/High-order_component_in_React

React进阶——使用高阶组件（Higher-Order Components）优化代码

http://tools.zhaishidan.cn/

[xgqfrms-GitHub]

生产环境构建

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

https://doc.webpack-china.org/guides/production-build/

--optimize-minimize

自动方式

运行webpack -p (也可以运行 webpack --optimize-minimize --define process.env.NODE_ENV="'production'"，他们是等效的)。

webpack --optimize-minimize --define process.env.NODE_ENV="'production'"

它会执行如下步骤：

使用 UglifyJsPlugin 进行 JS 文件压缩
运行LoaderOptionsPlugin，查看其文档
设置 NodeJS 环境变量，触发某些 package 包，以不同的方式进行编译。

$ webpack -p 

$ webpack --optimize-minimize --define process.env.NODE_ENV="production"

https://doc.webpack-china.org/guides/production-build/
https://doc.webpack-china.org/configuration/

http://lisperator.net/uglifyjs/

https://github.com/mishoo/UglifyJS2/

https://github.com/mishoo/UglifyJS2#usage

手动方式

当我们确实有为针对多种环境而分别配置的需求时，
最简单的途径就是，为不同的环境编写独立的 webpack 配置文件。

webpack.dev.js

webpack.prod.js

package.json

"scripts": {
"build:dev": "webpack --env=dev --progress --profile --colors",
"build:dist": "webpack --env=prod --progress --profile --colors"
}

webpack.config.js

module.exports = function(env) {
return require(./webpack.${env}.js)
}

https://doc.webpack-china.org/api/cli/#common-options

https://webpack.js.org/guides/environment-variables/
https://nodejs.org/api/process.html#process_process_env
https://blog.flennik.com/the-fine-art-of-the-webpack-2-config-dc4d19d7f172

webpack/webpack#2537
PatrickJS/PatrickJS-starter#386

https://survivejs.com/webpack/optimizing/environment-variables/
https://www.netlify.com/blog/2016/10/04/access-local-environment-variables-using-webpack/

"scripts": {
"build:prod": "NODE_ENV=production webpack -p --config webpack.config.js",
}

https://github.com/webpack/webpack-cli

https://doc.webpack-china.org/api/cli/#common-options

$ webpack --config webpack.config.js

$ webpack 

$ webpack --env.production 

$ webpack --env.platform=web 

$ webpack --json
$ webpack --json > stats.json

https://www.npmjs.com/package/webpack-env
http://stackoverflow.com/questions/30030031/passing-environment-dependent-variables-in-webpack

$ webpack --env

$ webpack --env.production 



$ webpack -d

$ webpack --debug --devtool eval-cheap-module-source-map --output-pathinfo


$ webpack -p

$ webpack --optimize-minimize --define process.env.NODE_ENV="production"


$ webpack --profile

https://webpack.js.org/api/cli/

高级途径

一个更复杂的方法是，有一个基本配置文件，
其中包含两个环境通用的配置，然后将其与特定于环境的配置进行合并。
这将为每个环境产生完整配置，并防止重复公共部分代码。

用于执行此"合并"工作的工具简称为 webpack-merge，
提供了各种合并选项，但下面我们只使用最简单的版本。

https://github.com/survivejs/webpack-merge

webpack.common.js

https://prepack.io/repl.html

[xgqfrms-GitHub]

cmd & webpack

$ webpack --config webpack.prod.config.js

# webpack [--config webpack.config.js]



$ webpack

$ webpack --config webpack.config.js



$ webpack -w

$ webpack --config webpack.config.js --watch





# sourceMaps & webpack-dev-server

$ webpack --config webpack.dev.config.js




# uglify & minify & clean & webpack -p

$ webpack --config webpack.prod.config.js





# node_modules/.bin/webpack

# webpack.cmd
# webpack-dev-server.cmd

# webpack <entry> [<entry>] <output>



$ webpack src/index.js dist/index.js

$ webpack src/app.js dist/app.js -w

# --watch / -w