1.创建 package.json 项目
npm init
2.安装 webpack, 并且设置为项目依赖：
npm install webpack --save-dev
当然你必须之前已经在 -g 下安装了 webpack
3.创建一个 webpack.config.js 文件，这个文件是 webpack 工作的参考。
我们对着/configuration/ 这个文档来创建 webpack.config.js 文件。
webpack.config.js 文件：
const path = require('path');module.exports = {entry: "./app/entry", // string | object | array// Here the application starts executing// and webpack starts bundlingoutput: {// options related to how webpack emits resultspath: path.resolve(__dirname, "dist"), // string// the target directory for all output files// must be an absolute path (use the Node.js path module)filename: "bundle.js", // string// the filename template for entry chunkspublicPath: "/assets/", // string// the url to the output directory resolved relative to the HTML pagelibrary: "MyLibrary", // string,// the name of the exported librarylibraryTarget: "umd", // universal module definition// the type of the exported library/* Advanced output configuration (click to show) */},module: {// configuration regarding modulesrules: [// rules for modules (configure loaders, parser options, etc.){test: /\.jsx?$/,include: [path.resolve(__dirname, "app")],exclude: [path.resolve(__dirname, "app/demo-files")],// these are matching conditions, each accepting a regular expression or string// test and include have the same behavior, both must be matched// exclude must not be matched (takes preferrence over test and include)// Best practices:// - Use RegExp only in test and for filename matching// - Use arrays of absolute paths in include and exclude// - Try to avoid exclude and prefer includeissuer: { test, include, exclude },// conditions for the issuer (the origin of the import)enforce: "pre",enforce: "post",// flags to apply these rules, even if they are overridden (advanced option)loader: "babel-loader",// the loader which should be applied, it'll be resolved relative to the context// -loader suffix is no longer optional in webpack2 for clarity reasons// see webpack 1 upgrade guideoptions: {presets: ["es"]},// options for the loader},{test: /\.html$/,use: [// apply multiple loaders and options"htmllint-loader",{loader: "html-loader",options: {/* ... */}}]},{ oneOf: [ /* rules */ ] },// only use one of these nested rules{ rules: [ /* rules */ ] },// use all of these nested rules (combine with conditions to be useful){ resource: { and: [ /* conditions */ ] } },// matches only if all conditions are matched{ resource: { or: [ /* conditions */ ] } },{ resource: [ /* conditions */ ] },// matches if any condition is matched (default for arrays){ resource: { not: /* condition */ } }// matches if the condition is not matched],/* Advanced module configuration (click to show) */},resolve: {// options for resolving module requests// (does not apply to resolving to loaders)modules: ["node_modules",path.resolve(__dirname, "app")],// directories where to look for modulesextensions: [".js", ".json", ".jsx", ".css"],// extensions that are usedalias: {// a list of module name aliases"module": "new-module",// alias "module" -> "new-module" and "module/path/file" -> "new-module/path/file""only-module$": "new-module",// alias "only-module" -> "new-module", but not "only-module/path/file" -> "new-module/path/file""module": path.resolve(__dirname, "app/third/module.js"),// alias "module" -> "./app/third/module.js" and "module/file" results in error// modules aliases are imported relative to the current context},/* alternative alias syntax (click to show) *//* Advanced resolve configuration (click to show) */},performance: {hints: "warning", // enummaxAssetSize: 200000, // int (in bytes),maxEntrypointSize: 400000, // int (in bytes)assetFilter: function(assetFilename) {// Function predicate that provides asset filenamesreturn assetFilename.endsWith('.css') || assetFilename.endsWith('.js');}},devtool: "source-map", // enum// enhance debugging by adding meta info for the browser devtools// source-map most detailed at the expense of build speed.context: __dirname, // string (absolute path!)// the home directory for webpack// the entry and module.rules.loader option// is resolved relative to this directorytarget: "web", // enum// the environment in which the bundle should run// changes chunk loading behavior and available modulesexternals: ["react", /^@angular\//],// Don't follow/bundle these modules, but request them at runtime from the environmentstats: "errors-only",// lets you precisely control what bundle information gets displayeddevServer: {proxy: { // proxy URLs to backend development server'/api': 'http://localhost:3000'},contentBase: path.join(__dirname, 'public'), // boolean | string | array, static file locationcompress: true, // enable gzip compressionhistoryApiFallback: true, // true for index.html upon 404, object for multiple pathshot: true, // hot module replacement. Depends on HotModuleReplacementPluginhttps: false, // true for self-signed, object for cert authoritynoInfo: true, // only errors & warns on hot reload// ...},plugins: [// ...],// list of additional plugins/* Advanced configuration (click to show) */}
实例：
const path = require('path');module.exports = {// 入口文件entry: "./app/main.js",// 出口文件output: {path: path.resolve(__dirname, "dist"), // stringfilename: "all.js" // string}}
至此，我们的 webpack 就已经可以进行标准的 CMD 模块化开发了。
4.我们引入 babel-loader 翻译 ES6：
npm install --save-dev babel-loadernpm install --save-dev babel-corenpm install --save-dev babel-preset-es
我们参考/babel/babel-loader 改变 webpack.config.js 文件：
const path = require('path');module.exports = {// 入口文件entry: "./app/main.js",// 出口文件output: {path: path.resolve(__dirname, "dist"), // stringfilename: "all.js" // string},module: {rules: [{test: /\.js$/,exclude: /(node_modules|bower_components)/,use: {loader: 'babel-loader',options: {presets: ['es']}}}]}}
友情提醒：webpack1 和 2 在配置上差别最大的就是 loader 的书写方法。
module --> rules --> test / exclude / use 属性，这是标准的 webpack2 的写法。
5.此时运行
webpack
命令，将自动的使用 CMD 构建 app 文件夹中的 main.js 文件，并且使用 babel 翻译。
6.下面继续配置 react：
npm install --save-dev reactnpm install --save-dev react-dom
配置 解析 JSX 语法：
npm install --save-dev babel-preset-react
至此，我们已经配置完毕 react 起步的所有的依赖，我们目前的 package.json 文件：
{"name": "01_helloworld","version": "1.0.0","description": "","main": "index.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1"},"author": "","license": "ISC","devDependencies": {"babel-core": "^6.26.0","babel-loader": "^7.1.2","babel-preset-es": "^6.24.1","babel-preset-react": "^6.24.1","react": "^16.2.0","react-dom": "^16.2.0","webpack": "^2.4.1"}}
.
