使用 webpack 構建項目通常包括以下幾個步驟:
npm install webpack webpack-cli --save-dev
創建 webpack 配置文件:在項目根目錄下創建一個名為 webpack.config.js 的文件,用于配置 webpack 的入口文件、輸出文件、loader 和插件等信息。
配置入口文件和輸出文件:在 webpack.config.js 文件中配置入口文件和輸出文件的路徑,例如:
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
}
};
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
]
}
};
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
})
]
};
"scripts": {
"build": "webpack --config webpack.config.js"
}
然后運行命令:
npm run build
以上就是使用 webpack 構建項目的基本步驟,根據項目的實際需求可以進一步配置 webpack 的各項功能和插件。