步骤
1.建立一个demo文件
index.html如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Webpcak 配置文件</title>
</head>
<body>
<h1 id="header">My Project</h1>
<script src="./dist/bundle.js"></script>
</body>
</html>
还有src目录和两个js文件 index.js 和util.js
util.js
function init() {
console.log('util works');
}
module.exports = {
init: init
}
index.js
var util = require('./util');
util.init();
console.log('index works');
2.在src目录里建立css文件夹并且写style.css文件
1.)安装了css-loader ,style-loader
2.)把css文件require到了index.js
require('../src/css/style.css')
3.)在webpack.config.js里设置了css的module,然后执行webpack命令
3.压缩HTML文件
1.)安装werbpack插件 Html-webpack-plugin
npm install --save-dev html-webpack-plugin
2.)在文件目录安装webpack(而不是在全局)
install the webpack-dev-server
3.)在webpack.config.js页面内配置
const webpack = require('webpack'); // 用于引用webpack内置插件
const HtmlWebpackPlugin = require('html-webpack-plugin'); // 外部插件
module.exports = {
plugins: [
new HtmlWebpackPlugin({template: './src/index.html'})
]
};
4.安装webpack刷新工具
npm i webpack-save-dev -g
就是全局安装,因为本地安装会需要npm script,因此为了简单,全局安装了,
因为全局安装,因此全局也必须有个webpack
5.跑webpack刷新工具
webpack-dev-server --open
参考的文章
什么是webpack
实现一个简单的Webpack
还学不会webpack?看这篇!
webpack超详细教程!入门一篇就够了