搭建项目
在第一篇中选择webpack作为构建工具
新建文件夹css-creator
mkdir css-creator
cd mkdir css-creator
npm init
terminal result
输入yes后
生成了package.json文件
package.json
开始配置webpack
npm install webpack webpack-cli webpack-dev-server html-webpack-plugin --save-dev
webpack4 需要安装webpack-cli
webpack-dev-server 是用来启动服务，热加载跨域代理等
html-webpack-plugin 是加载index.html用的
安装成功
package.json
创建webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
entry: path.resolve(__dirname, './src/app.js'),
devServer: {
port: 8088,
hot: true,
},
plugins: [
new HtmlWebpackPlugin({
filename: "index.html",
template: "./index.html",
}),
],
}
配置中 HtmlWebpackPlugin调用了一个index.html 那咱们也创建一个html
创建html
在package.json中增加scripts配置启动命令
package.json
用命令行启动项目
npm run dev
浏览器
命令行
仔细观察命令行发现有个报错，原来是
webpack.config.js中的entry 字段，填写的app.js但是却没有创建app.js文件增加src目录和 src/app.js
image.png
！！！增加文件后需要重启项目
image.png
页面已经显示正确啦
webpack构建的项目就已经搭建完成了
接下来会一点一点完善webpack的配置
此致
敬礼~
小旋风
我建了一个前端微信交流群，欢迎大家加入，qq中转群号：1076484243
