Webpack4教程 - 第三部分，如何使用插件
转载请注明出处：葡萄城官网，葡萄城为开发者提供专业的开发工具、解决方案和服务，赋能开发者。原文出处：https://wanago.io/2018/07/23/webpack-4-course-part
npm install html-webpack-plugin
// webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
plugins: [
new HtmlWebpackPlugin()
]
};
// webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
plugins: [
new HtmlWebpackPlugin({template: './src/index.html'})
]
};
// webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');
module.exports = {
entry: {
one: './src/one.js',two: './src/two.js',},output: {
filename: '[name].bundle.js',path: path.resolve(__dirname,'dist')
},plugins: [
new HtmlWebpackPlugin({
filename: 'one.html',template: './src/one.html',chunks: ['one']
}),new HtmlWebpackPlugin({
filename: 'two.html',template: './src/two.html',chunks: ['two']
})
]
};
npm install mini-css-extract-plugin
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
entry: './src/style.js',module: {
rules: [
{
test: /\.css$/,use: [
MiniCssExtractPlugin.loader,'css-loader'
]
}
]
},plugins: [
new HtmlWebpackPlugin(),new MiniCssExtractPlugin()
]
}
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Webpack App</title>
<link href="main.css" rel="stylesheet"></head>
<body>
<script type="text/javascript" src="main.js"></script></body>
</html>
原创声明
本站部分文章基于互联网的整理，我们会把真正“有用/优质”的文章整理提供给各位开发者。本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
服务热线 19970861797
