webpack

未分类

教程：https://segmentfault.com/a/1190000005022872
https://fakefish.github.io/react-webpack-cookbook/index.html
第一个教程：全局环境下

sudo npm install -g webpack
npm init  一直回车就会在该项目目录下生成package.json文件

跳转到项目文件下

npm install webpack --save-dev

安装css-loader,style-loader模块

npm install css-loader --save-dev

第二个教程

npm init
npm i webpack --save-dev
webpack
npm i webpack --save
npm run build
npm i webpack-dev-server --save
npm run dev

webpack-dev-server - 在 localhost:8080 建立一个 Web 服务器
--devtool eval - 为你的代码创建源地址。当有任何报错的时候可以让你更加精确地定位到文件和行号
--progress - 显示合并代码进度
--colors - Yay，命令行中显示颜色！
--content-base build - 指向设置的输出目录

Webpack 允许你使用不同的模块类型，但是 “底层”必须使用同一种实现。所有的模块都能够开箱即用。
ES6 模块 import MyModule from './MyModule.js';
CommonJS var MyModule = require('./MyModule.js');
AMD define(['./MyModule.js'], function (MyModule) {});

注意： ./ 是 “相对当前文件路径”
webpack只是一个模块合并器

React配置

npm install react --save
npm install babel-core babel-loader --save-dev  //安装babel-core和babel-loader

当按照教程报错Unexpected token 时，使用如下命令：
npm install babel-preset-react
然后在webpack.config.js中添加下行配置
query:
{
presets:['react']
}
解决方案地址：http://stackoverflow.com/questions/33460420/babel-loader-jsx-syntaxerror-unexpected-token