1、項目初始化
npm init
一路回車或設置，最後生成項目的package.json
2、安裝bootstrap和jquery
npm install bootstrap jquery
3、引入webpack4和webpack-cli
npm i webpack --save-dev
npm i webpack-cli --save-dev
4、打開package.json文件，添加以下內容
"scripts": {
"dev": "webpack --mode development",
"build": "webpack --mode production"
}
5、安裝配置文件使用babel-loader
babel-loader 是一個 webpack 的 loader(加載器)，用於將 ES6 及以上版本轉譯至 ES5
npm i @babel/core babel-loader @babel/preset-env --save-dev
在項目根目錄新建.babelrc的文件配置Babel：
{
"presets": ["@babel/preset-env"]
}
新建webpack.config.js文件進行babel-loader配置：
module.exports = {
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
}
]
}
};
6、構建處理HTML 的webpack插件
webpack需要安裝html-webpack-plugin 和 html-loader來處理打包html
npm i html-webpack-plugin html-loader --save-dev
在webpack.config.js文件夾中添加相應的內容，
const HtmlWebPackPlugin = require("html-webpack-plugin");
module.exports = {
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.html$/,
use: [
{
loader: "html-loader",
options: { minimize: true }
}
]
}
]
},
plugins: [
new HtmlWebPackPlugin({
template: "./src/page/index.html",
filename: "./index.html"
})
]
};
這個時候，可以在/src/page/index.html添加一個html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>webpack</title>
</head>
<body>
<div>
aaaa
</div>
</body>
</html>
運行 npm run build進行測試，運行成功會在dist下面生成index.html文件表示成功
7、配置入口文件集合和輸出文件集合
參考
1、http://0e2.net/post/79.html
2、http://www.tensweets.com/article/5cbdf91a362e5434baf63379
3、https://www.jianshu.com/p/4574baf78447