index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Demo1</title> </head> <body> <!-- webpack打包： 模块化，不可能所有代码写在一个文件， 优化加载速度 使用新的开发模式 webpack特点： require.js是一个老的打包工具，CommomJs主要用于Nodejs用于后端模块化标准，require.js使用的是AMD标准， npm是一个最大的模块管理库，从npm上下载，require.js比较老不再适合新的需求。 browserify主要支持npm对AMD不支持，webpack对Commonjs和AMD和ES6的import都可以很好支持的打包工具，browserify只支持js文件打包，webpack可以打包js、css、图片。 webpack同是支持Commomjs和AMD，一切都可以打包，分模块打包。 ----> <script src="bundle.js"></script> </body> </html>
index.js
require('./index.css');
document.write('Hello World!!!!!');
index.css
body { background: white; }
package.json
{
"name": "demo1",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo "Error: no test specified" && exit 1",
"start": "webpack-dev-server --progress --colors"
},
"author": "",
"license": "ISC",
"devDependencies": {
"css-loader": "0.18.0",
"style-loader": "0.12.3",
"webpack": "1.12.1",
"webpack-dev-server": "1.10.1"
}
}
webpack.config.js
module.exports = { entry: './index.js', //多少页面 output: { //最后生成的文件放在哪里 path: __dirname, //当前目录下 filename: 'bundle.js' }, module: { //所有文件都可以看成模块 loaders: [{ //处理文件 test: /.css$/, //test是检测的意思，检测css结尾的文件， loaders: ['style-loader', 'css-loader'] //使用2个loader来处理 }] } };