标签：try head 整理 output 环境 new NPU uil round
>>建立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>
标签：try head 整理 output 环境 new NPU uil round
原文地址：https://www.cnblogs.com/ccdat/p/10192400.html
