webpack-zhaoheng

webpack

初始化项目

npm init -y

安装 webpack

全局安装

npm i webpack webpack-cli -g

本地安装

npm i webpack webpack-cli -D

执行本地 webpack

根据刚才全局安装的执行方式，可以猜到本地安装也可以通过命令行路径执行

./node_modules/.bin/webpack

npm@5 引入了 npx 简化了本地 node_modules 的执行

npx webpack

module.exports = {
    mode: 'development',
    mode: 'production'
}

区分开发环境和生产环境

配置文件编程函数

"scripts": {
    "build": "webpack --config webpack.config.js  --mode=development",
    "start": "webpack --config webpack.config.js  --mode=production"
},

entry 入口文件

• 单 entry
• 多 entry

// HtmlWebpackPlugin会在打包结束后，自动生成一个html文件，并把打包生成的js自动引入到这个html文件中
const HtmlWebpackPlugin = require('html-webpack-plugin');

new HtmlWebpackPlugin({
    // template: '/index.html'
    template: path.resolve(__dirname, 'src/index.html')
})

output