1.安装webpack
npm install webpack webpack-cli -g
npm install webpack webpack-cli --save-dev
2.安装css插件
.npm i css-loader style-loader
3.安装html插件
npm i -D html-webpack-plugin
npm i html-webpack-plugin -g --save-dev
4.安装热启动插件
npm install webpack-dev-server -g --save-dev
{ "name": "school", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo "Error: no test specified" && exit 1" }, "author": "", "license": "ISC", "dependencies": { "css-loader": "^5.0.0", "style-loader": "^2.0.0" }, "devDependencies": { "html-webpack-plugin": "^4.5.0", "webpack": "^5.1.3", "webpack-cli": "^4.1.0" } }
var HtmlWebpackPlugin = require('html-webpack-plugin'); //打包html的插件 module.exports = { entry:'./src/entry.js', output:{ filename:'bundle.js' }, module: { rules: [ { test: /.css$/, // 正则表达式,表示.css后缀的文件 use: ['style-loader','css-loader'] // 针对css文件使用的loader,注意有先后顺序,数组项越靠后越先执行 } ] }, plugins:[ new HtmlWebpackPlugin({ filename:'index.html', template:'src/index.html' }) ] }