创建基本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
    ]
}