panxw / react-with-webpack

A demo with react & webpack!

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

webpack打包入门教程

1.单个文件打包

webpack test.js bundle.js //指定输入文件为test.js, 打包输出文件为bundle.js

2.多个js或相关文件时,输入文件指定为js入口文件,如main.js中require了两次其它模块:

//main.js
require('style-loader!css-loader!./css/main.css');
require('./common.js');

这时,打包命令是:

webpace  main.js bundle.js //指定入文件文件main.js即可

3.使用相应loader

如require时css使用了css-loader条件,2中提到的在require时可指定loader,但不推荐这样做。 使用命令行执行webpack可以通过--module-bind指定loader,如下:

webpack main.js bundle.js --module-bind "css=style-loader!css-loader" --progress --display-modules --display-reasons 

4.配置webpack.config.js

最好使用这种配置文件的方式,方便配置loader,及打包时所用到的插件。

//webpack.config.js
require('webpack')
module.export={
	
}

About

A demo with react & webpack!


Languages

Language:JavaScript 98.4%Language:HTML 0.9%Language:CSS 0.7%