webpack 学习

1

初始化目录 自动生成package.json

npm init -y

安装webpack
npm i webpack webpack-cli -D

创建webpack.config.js

module.exports = {
	mode:"development"
}

修改package.json
script 下新增
“dev”:“webpack”

执行 npm run dev
将自动生成 …dist/main.js

最后index.html 引入 main.js文件

2

配置入口出口

const path = require('path')

module.exports = {
    // 编译模式
    mode: 'development', // development  production
    entry: path.join(__dirname, './src/index.js'),
    output: {
        path: path.join(__dirname, './dist'), // 输出文件的存放路径
        filename: 'bundle.js' // 输出文件的名称
    }
}

修改index.html 引入bunble.js 文件