1.安装
先装好node和npm，因为webpack是一个基于node的项目。然后
npm install -g webpack
2.建立项目
建一个文件夹，然后新建一个package.json的文件在项目根目录下
mkdir testwebpack
cd testwebpack
npm init
2.1询问一些问题:按回车选择默认值 自动生成文件
package.json
package name: (webpack-test) 包名(demo)
version: (1.0.0) 版本
description: 描述
entry point: 入口程序(main.js)
test command: 测试指令("dev": "webpack-dev-server","build": "webpack -p")
git repository: node_modules
keywords: 关键字
author: 作者
license: (ISC) MIT MIT
Is this ok? (yes) yes
3.在创建webpack.config.js
module.exports = {
entry: './main.js', /*你要打包的js文件*/
output: {
filename: 'bundle.js' /*打包后生成的文件*/
},
module: {
rules:[
{
test: /\.css$/, /*引入css文件配置*/
use: [ 'style-loader', 'css-loader' ]
},
]
},
module: {
rules:[
{
test: /\.(png|jpg)$/, /*引入图片文件配置*/
use: [
{
loader: 'url-loader',
options: {
limit: 8192
}
}
]
}
]
}
};
3.1例如我的main.js里写
document.write('<h1>Hello World</h1>');
require('./app.css');
var img = document.createElement("img");
img.src = require("./small.png");
document.body.appendChild(img);
3.2查看打包好后使用的JS则创建html文件
<html>
<body>
<script type="text/javascript" src="bundle.js"></script>
</body>
</html>
4.创建服务器
npm i -g webpack webpack-dev-server
5.安装依赖关系。
npm install
6.打包
npm run dev
