一、全局安装

npm install webpack -g
npm install webpack-cli -g

二、创建webpack项目

新建项目文件夹，例如myProject
进入文件夹后启动命令行，当前项目下本地安装webpack

npm i webpack -S

初始化项目，自动生成相应的package.json配置

npm init -y

项目文件中新建三个文件夹src,dist,config

三、简单打包测试

webpack 4.x默认的入口文件是src文件下的index.js
所以在src中新建一个index.js
可以直接简单测试下webpack打包

webpack

完成后dist文件出现main.js

webpack有两种打包环境：
开发环境 development
生产环境 production
打包时需要配置一下的相应的环境，否则会出现黄色警告

webpack --mode=developement 
//或者
wepback --mode=production

四、config设置

package.json
主要负责一些依赖项，命令的定义之类的，和开发环境配置有关

在config文件下新建webpack.dev.js
主要负责一些压缩，打包，入口，输出文件方面的事，和业务有关
（先修改之前的src下的index.js为main.js）
webpack.dev.js编辑内容如下

const path=require('path')

module.exports={
    //webpack4 独有的mode,production/development
    mode:'development',
    //入口
    entry:{
        main:'./src/main.js'
    },
    //出口
    output:{
        //path.resolve把路径变为绝对路径
        path:path.resolve(__dirname,'../dist')
    }
    
}

在package.json中的scripts里添加一行

"scripts": {
    "build": "webpack --config=config/webpack.dev.js"
  },

需要安装webpack-cli

npm i webpack-cli -S

测试打包

npm run build

如果多个入口js文件,entry加入相应的内容,output设置filename:'[name].js'

const path=require('path')

module.exports={
    //webpack4 独有的mode,production/development
    mode:'development',
    //入口
    entry:{
        main:'./src/main.js',
        index:'./src/index.js',
        /*
            下面写法，是将两个js打包合并成一个js
            all:['./src/main.js','./src/index.js']
        */
    },
    //出口
    output:{
        //path.resolve把路径变为绝对路径
        path:path.resolve(__dirname,'../dist'),
        filename:'[name].[hash].js'
    }
}

五、webpack 服务server

先全局安装

npm i webpack-dev-server -g

在package.json中设置

 "scripts": {
    "server":"webpack-dev-server --config=config/webpack.dev.js"
  },

在webpack.dev.js中加入

devServer:{
        //基本的目录结构
        contentBase:path.resolve(__dirname,'../dist'),
        //ip地址
        host:'localhost',
        //服务器是否开始压缩
        compress:true,
        //端口号
        port:1234
    }

启动npm run server

六、打包css、html文件

1. 打包css文件

需要安装css解析器

//style-loader则是将打包后的css代码以<style>标签形式添加到页面头部
npm i style-loader -S
//css-loader只是用于加载css文件（并没有添加到页面）
npm i css-loader -S

在webpack.dev.js中添加module

//模块，配置css,js,图片等的处理
    module:{
        rules:[{
            test:/\.css$/,
            use:[{
                loader:'style-loader'
            },{
                loader:'css-loader'
            }]
        }]
    },

在src下新建css文件夹，新建index.css，在main.js中导入index.css

import css from './css/index.css'

重新运行npm run server
这样的css是在head头部通过<style></style>标签引入的
可以通过插件extract-text-webpack-plugin提取css，生成单独的css文件

npm i extract-text-webpack-plugin@next -S

在webpack.dev.js中加入

const ExtractTextWebpackPlugin=require('extract-text-webpack-plugin')
module:{
        rules:[{
            test: /\.css$/,
            use:ExtractTextWebpackPlugin.extract({
                fallback:'style-loader',
                use:['css-loader']
            })
        }]
    },
plugins:[
        new ExtractTextWebpackPlugin("/css/[name].[hash].css")
    ],

npm run build 单独的css文件后在dist下的css文件夹下

2. 打包html文件

就是自动生成dist中的index.html并引入js文件
将之前dist中的index.html移动到src下，并删除引入的js
首先安装插件html-webpack-plugin

npm i html-webpack-plugin -S

在webpack.dev.js中添加plugins

const htmlWebpackPlugin=require('html-webpack-plugin')
//插件
    plugins:[
        new htmlWebpackPlugin({
            title:'我是首页',
            template:'./src/index.html',
        })
    ],

npm run server查看效果