jetway v1.0.0

webpack构建前端工程

1、确保安装了 Node.js，首先创建一个目录，初始化 npm

mkdir cat-design && cd cat-design npm init

2、本地安装 webpack

npm install -g webpack //全局安装 npm install webpack --save-dev //安装到你的项目目录 npm install webpack-dev-server --save-dev //开发环境使用的一个轻量的node.js express服务器

3、安装依赖

• 生产环境依赖 npm install react —save npm install react-dom —save npm install react-router -save //路由

• 开发环境依赖 loader npm install babel-core --save-dev npm install babel-loader --save-dev //webpack使用 npm install babel-preset-env --save-dev //解析ES6 npm install babel-preset-react --save-dev //react转码，解析jsx npm install url-loader --save-dev //把较小的图片转换成base64的字符串内嵌在生成的文件里

• 开发环境依赖 plugin npm install babel-plugin-transform-runtime --save-dev //比babel-polyfill更灵活 npm install extract-text-webpack-plugin --save-dev //ExtractTextPlugin：分离CSS和JS文件 npm install html-webpack-plugin —-save-dev //webpack打包生成html页的插件 npm install babel-plugin-transform-class-properties --save-dev //解析class中的properties，原来class中定义方法或者变量不可以写init = () => {}, 只能写成init(){} npm install babel-plugin-transform-decorators-legacy --save-dev //代码中使用decorators要使用babel的插件，官方目前插件还不支持，使用第三方的

• CSS npm install style-loader css-loader --save-dev npm install less-loader less --save-dev //css预处理器

4、配置 babel，在根目录下新建 .babelrc文件

{

"presets": "env", "react", "plugins": "transform-runtime" }

5、配置 webpack，在根目录下新建 webpack.config.js，如果想使用es6去写配置，那么把文件名改为 webpack.config.babel.js

6、配置 .gitignore node_modules/ build/ dist/

.idea npm-debug.log yarn-error.log