使用 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 的各项功能和插件。