webpack基础配置

// webpack 搭建项目
// 1.全局安装webpack npm i webpack -g 
// 2.项目根目录初始化项目 npm init -y 
// 3.在项目的根目录下面安装webpack 和 webpack-cli (本地安装webpack)
// npm install  webpack --save-dev
// npm install webpack-cli --save-dev
// 4. 创建一个webpack.config.js文件  （webpack基于node，so 遵循commonJS规范）
// 5.创建src 文件夹，创建index.html indexed.js入口出口文件（默认入 src/index.js 出dist/main.js ）
// 6.package.json内部项目启动命令 scripts:{"dev":"webpack"} 
// 安装webpack-dev-server 后webpack-dev-server是一个小型的Node.js Express服务器，它并不会真实的去打包文件，
// 只是生成一个内存中的打包，把文件写到内存中，默认端口是8080。
// 支持热更新scripts:{"dev":"webpack-dev-server"}，且不需要在index.html内部引入内存中的index.js(默认引入)
// 7.运行命令 npm run dev 会自动生成dist文件夹

// webpack.config.js 
// mode:development开发，快速打包/production 生产压缩，减少内存
// entry:'./src/index.js' 默认 
//  多个入口的情况
// entry: ['./src/index.js','./src/a.js']
// 出口
// const path = require('path');
// output:{
//     //路径必须是一个绝对路径，resolve可以把相对路径解析为一个绝对路径
//     //path.resolve('dist')也可以，表示在当前路径下解析一个dist目录
//  __dirname 当前路径
//     path : path.resolve(__dirname,'dist'),
//     filename : '[name].bundle.js'   //打包后的文件名
// }

// plugins
// npm install --save-dev html-webpack-plugin
// const HtmlWebpackPlugin = require('html-webpack-plugin');
// const path = require('path');
// plugins: [new HtmlWebpackPlugin({
    // template: path.join(__dirname, './src/index.html'),
    // filename: 'index.html',
    // filename配置的html文件目录是相对于webpackConfig.output.path路径而言的，不是相对于当前项目目录结构的。
// })],//这将会生成一个包含以下内容的 dist/index.html 文件：


// loader

// package.json  scripts内部
// "dev":"webpack --mode development",
//  "build":"webpack --mode production"
// 只需要在命令行执行npm run dev便相当于执行webpack --mode development，
// 执行npm run build便相当于执行webpack --mode production。

参考：

webpack 配置环境
webpack常见配置