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来处理
}]
}
};
时间： 2024-10-26 00:38:28