創建基本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

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
    ]
}