在 webpack 4 中，可以無須任何配置使用，然而大多數項目都需要比較複雜的設置。
增加webpack.config.js配置文件，使其目錄如下
webpackDemo
|- package.json
+ |- webpack.config.js
|- /dist
|- index.html
|- /src
|- index.js
webpack.config.js代碼如下
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
使用新配置文件再次執行構建
#此處的--config webpack.config.js可以省略，默認就是使用webpack.config.js這個文件名
npx webpack --config webpack.config.js
加載CSS
爲了從 JavaScript 模塊中 import 一個 CSS 文件，你需要在 module 配置中 安裝並添加 style-loader 和 css-loader：
npm install style-loader css-loader --save-dev
修改webpack.config.js
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
}
]
}
};
在項目/src中添加一個新的 style.css 文件
.red {
color: red;
}
src/index.js
//導入lodash
import _ from 'lodash';
//導入樣式文件
import './style.css';
function component() {
var element = document.createElement('div');
// Lodash（目前通過一個 script 腳本引入）對於執行這一行是必需的
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
element.classList.add('red');
return element;
}
document.body.appendChild(component());
index.html
<!doctype html>
<html>
<head>
<title>處理css模塊</title>
</head>
<body>
<script src="./dist/bundle.js"></script>
</body>
</html>
執行構建
npx webpack
瀏覽器打開index.html即可看到字體顏色變紅了
加載圖片
需要用到 file-loader 這個模塊
npm install file-loader --save-dev
webpack.config.js增加配置項
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
},
{
test: /\.(png|svg|jpg|gif)$/,
use: [
'file-loader'
]
}
]
}
};
/src增加一張圖片 icon.png
