>>建立nodejs工程
新建文件夹，npm init 生成package.json
>>安装webpack 和 webpack-dev-server
npm install --save-dev webpack@3.8.1 注意4.x版本语法有些变化
npm install --save-dev webpack-dev-server@2.9.7 注意踩坑记录1
>>安装babel转码es6
Babel其实是几个模块化的包，其核心功能位于称为babel-core的npm包中，webpack可以把其不同的包整合在一起使用，对于每一个你需要的功能或拓展，你都需要安装单独的包（用得最多的是解析Es6的babel-env-preset包和解析JSX的babel-preset-react包）。
npm install --save-dev babel-core babel-loader babel-preset-react babel-preset-env
>>支持 react 开发
npm install --save-dev react react-dom 注意这里是本地安装，也可以用全局安装
安装其他可选插件：
>>配置webpack.config.js
踩坑记录
1：webpack是3.x版本的，webpack-dev-server是3.x的版本，这两个版本不兼容，可以把webpack-dev-server降到2.x版本
踩坑解决办法示例：TypeError: Cannot read property ‘compile‘ of undefined #1334
解决思路： 优先使用 Google 引擎进行搜索关键词句, 比如 webpack Cannot read property ‘compile‘ of undefined；看能否找到相应的问题。
如果不行，不妨换一种方式再搜索，譬如：site:stackoverflow.com webpack Cannot read property ‘compile‘ of undefined，在具体某个网站下搜索；如果还是没能找见解决办法的话，可以在各种平台提问，比如 segmentfault。
额外补充： 对于 Google 这个工具还真是有必要先学，具体常用操作可参见：如何更好地运用 Chrome (Google)。倘若，不能够没有适用 Google 的环境，那么这里整理集结若干优质搜索引擎，堪称 Google 搜索优质替代品，可供参考。
package.json 示例：
{ ?"name": "testwordexport", ?"version": "1.0.0", ?"description": "", ?"main": "index.js", ?"scripts": { ???"test": "echo \"Error: no test specified\" && exit 1", ???"build": "webpack --env.NODE_ENV=development", ???"start": "webpack-dev-server" ?}, ?"author": "LCJ", ?"license": "ISC", ?"devDependencies": { ???"babel-core": "^6.26.3", ???"babel-loader": "^8.0.4", ???"babel-preset-env": "^1.7.0", ???"babel-preset-react": "^6.24.1", ???"clean-webpack-plugin": "^1.0.0", ???"html-webpack-plugin": "^3.2.0", ???"webpack": "^3.8.1", ???"webpack-dev-server": "^2.9.7" ?}, ?"dependencies": { ???"react": "^16.7.0", ???"react-dom": "^16.7.0" ?}}webpack.config.js 示例：
const path = require(‘path‘);// const webpack = require(‘webpack‘);const HtmlWebpackPlugin = require(‘html-webpack-plugin‘);const CleanWebpackPlugin = require(‘clean-webpack-plugin‘);module.exports = { ?entry: { ???index: ‘./src/index.js‘, ?}, ?output: { ???filename: ‘[name].bundle.js‘, ???path: path.resolve(__dirname, ‘dist‘) ?}, ?module:{ ???rules:[ ???????{ ???????????test:‘/\.(js|jsx)$/‘, ???????????use:{ ???????????????loader:‘babel-loader‘, ???????????????options: { ???????????????????presets: [ ???????????????????????"env", "react" ???????????????????] ???????????????} ???????????}, ???????????exclude:/node_module/ ???????} ???] ?}, ?plugins: [ ???new CleanWebpackPlugin([‘dist‘]), ???new HtmlWebpackPlugin({ ?????title: ‘测试输入‘, ?????template: ‘src/template/index.html‘ ???}) ???// new webpack.optimize.UglifyJsPlugin() ?], ?devServer: { ???contentBase: path.join(__dirname, "dist"),//本地服务器所加载的页面所在的目录 ???inline: true, //实时刷新 ???port: 9000, //端口改为9000 ???open:true // 自动打开浏览器 ?}};模板html示例：
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> ???<title><%=htmlWebpackPlugin.options.title %></title> ???<meta charset="utf-8" /> ???<style> ???????.center{ ???????????width:500px; ???????????margin: 0 auto; ???????} ???</style></head><body> ???<div id="template-containerId" class="center" > ???????<input type="text" id="testText" value="测试输入"></text> ???????<input type="button" id="testBtn" value="开始"></text> ???</div></body></html>webpack工程搭建
原文地址：https://www.cnblogs.com/ccdat/p/10192400.html