创建基本webpack4.0项目
1、运行cnpm init -y快速初始化项目
2、再项目根目录创建src和dist目录
3、再src目录下面创建index.html文件
4、安装webpackcnpm install webpack webpack-cli -D
如果运行
webpack打包的时候提示
image.png
需要运行cnpm install webpack-cli -g
5、新建webpack.config.js文件
//向外暴露一个打包的配置对象
module.exports = {
mode: 'development'
}
6、安装cnpm install webpack-dev-server -D
image.png
然后就可以使用
npm run dev运行项目7、自动打开index页面
安装
cnpm i html-webpack-plugin -D
const path = require('path')
//导入再内存中自动生成index页面的插件
const HtmlWebPackPlugin = require('html-webpack-plugin')
//创建一个插件实例
const htmlPlugin = new HtmlWebPackPlugin({
//path.join拼接路径
//__dirname当前文件所再的内存目录，就是项目的跟目录
template: path.join(__dirname, './src/index.html'),//源文件
filename: 'index.html' //生成的内存中首页的名称
})
//向外暴露一个打包的配置对象
module.exports = {
mode: 'development',//development production
plugins: [
htmlPlugin
]
}
