webpack 5.x 示例

操作步骤
1.npm init -y
2.npm install webpack webpack-cli --save-dev
3.npm install --save lodash
4.npm install --save-dev style-loader css-loader
5.npm install --save-dev webpack-merge

目录

webpack.common.js

const path = require('path');

const HtmlWebpackPlugin = require('html-webpack-plugin');


module.exports = {
	entry: {
		app: './src/index.js',
	},

	plugins: [
		new HtmlWebpackPlugin({
			title: 'Production',
		}),
	],

	output: {
		filename: '[name].bundle.js',
		path: path.resolve(__dirname, 'dist'),
		clean: true,
	},

	module: {
		rules: [{
				test: /\.css$/,
				use: ['style-loader', 'css-loader'],
			},
			{
				test: /\.(png|svg|jpg|jpeg|gif)$/i,
				type: 'asset/resource',
			},
		],
	},
};

webpack.dev.js

const {
	merge
} = require('webpack-merge');

const common = require('./webpack.common.js');

module.exports = merge(common, {
	mode: 'development',
	devtool: 'inline-source-map',
	devServer: {
		static: './dist',
	},
});

webpack.prod.js

const {
	merge
} = require('webpack-merge');

const common = require('./webpack.common.js');

module.exports = merge(common, {
	mode: 'production',
});

index.js

import _ from 'lodash';
import './style.css';
import Icon from './logo.png';

function component() {
  const element = document.createElement('div');

  // lodash 在当前 script 中使用 import 引入
  element.innerHTML = _.join(['Hello', 'webpack'], ' ');
  element.classList.add('hello');

  // 将图像添加到我们已经存在的 div 中。
  const myIcon = new Image();
  myIcon.src = Icon;
  // myIcon.src = './logo.png';
  element.appendChild(myIcon);

  return element;
}

document.body.appendChild(component());

function test_fun() {
  var test = document.createElement('div');

  test.innerHTML = _.join('test demo', '');
  test.classList.add('hello2');

  return test;
}

document.body.appendChild(test_fun());

style.css

.hello {
  color: red;
  background: url(./logo.png);
  background-size: auto 100%;
  background-repeat: no-repeat;
  background-position: center;
}

package.json文件需要添加(添加到scripts下)

"start": "webpack serve --open --config webpack.dev.js",
"build": "webpack --config webpack.prod.js"

package.json添加之后

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack serve --open --config webpack.dev.js",
    "build": "webpack --config webpack.prod.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^6.4.0",
    "html-webpack-plugin": "^5.3.2",
    "style-loader": "^3.3.0",
    "webpack": "^5.58.1",
    "webpack-cli": "^4.9.0",
    "webpack-dev-server": "^4.3.1",
    "webpack-merge": "^5.8.0"
  },
  "dependencies": {
    "lodash": "^4.17.21"
  }
}

效果