關於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'//只增長了這行
        })
    ]

　　而後重啓一下服務器能夠了，

至此安裝完工。