步驟
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超詳細教程！入門一篇就夠了