关于webpack4.0更新以后安装，发现跟3.X 大不相同的

wabpack4.0没出来以前，一直安装的是3.8，用着用着发现系统更新了，而后按照原来的样子更新一遍，发现各类各样的问题。

因而摸爬滚打了一天，终于今早解决，分享给你们但愿你们少走弯路

1.安装webpack4.X 第一步

首先新建一个pack.json

npm init -y

 

分全局和本地，随便本身用那种方式均可以

全局安装

npm i webpack  webpack-cli -g

4.0以后，加入cli文件，你要一块儿安装否则会报错

而后运行

webpack -v

看到版本说明安装成功

本地安装

npm i webpack  webpack-cli -D

　　安装好了以后能够在pack.json里面看到你的版本

而后进入你所在文件的根目录，创建几个文件和文件夹 分别是dist文件夹  dist/index.html文件  src文件夹  src/index.js文件  webpack.config.js

就像我截图这样

 

而后进入webpack.config.js 配置下

const htmlPlugin = require('html-webpack-plugin')
const path=require('path')
module.exports = {
    mode: 'development',//这里有两个参数 development（开发，体积大，未压缩） production(生产，体积小)
    entry: path.join(__dirname,'./src/index.js'),
    output: {
        path: path.join(__dirname, './dist'),
        filename: 'main.js' //这里不用写出口文件直接写路径就好了
    },
    plugins: [
        new htmlPlugin({
            template: './dist/index.html'//只增长了这行
        })
    ]
    // devServer:{
    //     open:true,//自动打开浏览器
    //     port:3000,//设置启动端口
    //     contentBase:'src',//指定托管的根目录
    //     hot:true,//启用热更新 第一步

    // }
}

这里就能够直接运行 webpack

配置webpack-dev-server

运行

npm i webpack-dev-server  -D

　打开pack.json,找到scripts 命令，添加

 "dev": "webpack-dev-server --mode development --open --hot "

　　

运行 npm run dev 启动服务器

　　配置html-webpack-plugin 

运行 npm i html-webpack-plugin  -S

　　安装好了而后配置webpack.json

 plugins: [
        new htmlPlugin({
            template: './dist/index.html'//只增长了这行
        })
    ]

　　而后重启一下服务器能够了，

至此安装完工。