先放下我的打包文件。
const path = require('path');
//因为path是node包里的，所以我们要包path包引入进来
const cleanwpPlug = require('clean-webpack-plugin');
//这里是引用那个清除的插件，注意该插件只能清除一个js
module.exports = {
entry: {
index: './src/js/index.js'
}, //入口,打包时你要打包哪些js文件
output: { //出口，待输出的成品文件的基本信息，如：名字。输出路径
filename: '[name].[chunkhash:8].js',
//含义是输入文件是什么名字，输出就是什么名字
// .[chunkhash:8]的意思是每次输出在文件后随机生成一个8位数，让文件不一样
path: path.resolve(__dirname, '../out')
//__dirname这是webpack.config.js文件的绝对路径，'../out' 这是存包路径
},
module:{ //引入打包css的插件
rules:[
{ test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]
}
]
},
mode: "development", //模式，有个默认模式，
//你可以定义是开发模式（不会压缩）或者生产模式（会压缩，默认）
plugins: [ //使用清除插件
new cleanwpPlug(['out'],{
root: path.resolve(__dirname, '../')
})
]
}1.首先在你想要生成项目的文件位置生成package.json文件（配置文件）先用cmd窗口进入你放项目的文件夹，用 npm init -y 生成package.json文件
2.开始安装webpack npm install -D webpack (当你的webpack是4.0版本以上时还要安装个脚手架cli,运行命令 npm install -D webpack-cli)
3.弄完后，在你的项目文件中建立3个文件夹。分别为config (配置)，out (输出)，src (输入)
4.在config 配置文件夹中建立webpack.config.js文件
5.在里面写
module.exports = {
entry: {}, //入口,打包时你要打包哪些js文件
output:{}, //出口，待输出的成品文件的基本信息，如：名字。输出路径
mode:”” //模式，有个默认模式，你可以定义是开发版或者什么
}
6.配置完后在src放入你的项目，注意js和entry里面的要有联系。
7.执行打包语句 webpack –config config/webpack.config.js
(但是这样每次保存后都要自己手动执行一遍打包程序，所以我们可以在package.json配置每次保存后自动打包一次)
在package.json文件的script中的text后面加个,号然后写上“start”: “webpack –config config/webpack.config.js”
配置好后可以直接运行项目 npm run start
8.因为只要修改了js代码，每次打包后，在out文件夹下都会重新生成一个js文件，而没用的老的打包后的js文件并不会删除，所以我们要下载webpack插件来解决。
9.在你的项目文件中安装清除缓存js的插件 npm install -D clean-webpack-plugin
10.装完后，在webpack.config.js中引入这个插件。
（打包css方法，首先安装css-loader style-loader。执行 npm install css-loader style-loader）
打包css文件 要loader加载器,要先安装npm 正则表达式 loader打包
loader解析 相当于node下的一个js，用npm安装了
安装loader npm install css-loader style-loader，
在output后接一个module语块来处理打包css的文件
module:{
rules:[
{ test: /\.css$/,
use: [ ‘style-loader’, ‘css-loader’ ]
}
]
},
都像这样写。
//注意！最后在你的index.html文件中引入打包后的js文件，即output中你定义的文件。
下面放代码原件
先是项目目录
package.json文件
{
"name": "h5text",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack --config config/webpack.config.js"
}, //上面的才是最重要的，下面是你用npm安装了哪些东西，它会自动加入进入，如css-loader
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"clean-webpack-plugin": "^1.0.0",
"webpack": "^4.28.4",
"webpack-cli": "^3.2.1"
},
"dependencies": {
"css-loader": "^2.1.0",
"style-loader": "^0.23.1"
}
}
package-lock.json文件不用管
config文件夹下的webpack.config.js文件配置
const path = require('path'); //因为path是node包里的，所以我们要包path包引入进来
const cleanwpPlug = require('clean-webpack-plugin');
module.exports = {
entry: {
index: './src/js/index.js'
}, //入口,打包时你要打包哪些js文件
output: { //出口，待输出的成品文件的基本信息，如：名字。输出路径
filename: '[name].[chunkhash:8].js', //含义是输入文件是什么名字，输出就是什么名字.
//[chunkhash:8]的意思是每次输出在文件后随机生成一个8位数，让文件不一样
path: path.resolve(__dirname, '../out') //__dirname这是webpack.config.js文件的
//绝对路径，'../out' 这是存包路径
},
module:{
rules:[
{ test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]
}
]
},
mode: "development", //模式，有个默认模式，你可以定义是开发模式（不会压缩）或者
//生产模式（会压缩，默认）
plugins: [
new cleanwpPlug(['out'],{
root: path.resolve(__dirname, '../')
})
]
}
重点！打包css文件你必须要在入口文件先引入css文件，注意不要搞错路径
import '../css/trends.css';
import '../css/www.css';
window.onload =function(){alert(2);}
引入后在你的html文件中不要再引入其他css和js文件，只要引入你的打包后的输出js文件，我这里因为弄了一个自动清理老的打包后的输出js文件并且给了他一个随机数来区分，大家自己弄时可以把输出文件名确认下来不弄随机数，我这暂且给个参考
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>背景透明，文字不透明</title>
<style>
*{
padding: 0;
margin: 0;
}
</style>
<script type="text/javascript" src="../out/index.45b7cfe0.js" ></script>
//只有引入这个js文件就可以了
</head>
<body>
<div class="demo">
<p onclick="ss()">背景透明，文字不透明</p>
</div>
</html>
注意：大家看视频时老是看到有的解析有的文章用import引入css，有的用require。其实都是一样的，但是用import它的优先级高于require。大家要注意一下！不然会一脸懵，还有一种在config文件夹下的webpack.config.js文件配置中用loader来引入css打包等插件，个人不推荐，因为这个不能实现热更新。