Webpack4的安裝與使用

一、安裝node

由於webpack是基於node環境下運行的，因此咱們首先要安裝node
官網：https://nodejs.org/en/
安裝完成後查看

node -v

二、全局安裝webpack

爲了方便使用，咱們能夠先安裝一個全局的webpack，因爲webpack4.0開始須要依賴webpack-cli，因此咱們能夠一塊兒安裝了，其中-D是全局安裝的意思

npm install webpack webpack-cli -D

查看是否成功

webpack -v

三、局部安裝

緣由不用我說了，官方已經說明了，全局webpack這會將你項目中的 webpack 鎖定到指定版本，而且在使用不一樣的 webpack 版本的項目中，可能會致使構建失敗。
因此咱們須要在項目中安裝局部webpack

首先咱們初始化一下！！！記住，咱們每個項目一開始都須要初始化！！！

npm init -y

而後咱們會看到項目根目錄下多了一個package.json文件，裏面存儲着咱們項目所使用的各個包的版本

而後安裝webpack

npm install --save-dev webpack  
npm install --save-dev webpack-cli

而後webpack會安裝到咱們的項目根目錄下，同時會多了一個package-lock.json文件

四、webpack的配置

因爲webpack更新4.0後，不少要求的變嚴格了，若是你不配置的話，不但會影響打包速度，而已會不斷的輸出提示。
建立一個webpack.config.js

module.exports = {
    //打包模式，必定要配置，否則打包速度慢不少
    mode:'development',//開發模式
    // mode:'production',//開發模式

    //入口
    entry:{
        "main":"./main.js"
    },
    // 出口
    output:{
        filename:'./build.js'
    },
    // 監聽文件改動，自動打包
    watch: true,
}

五、webpack使用

打包命令一（沒有配置的時候）

webpack main.js --output-filename bundle.js --output-path . --mode development

簡寫

webpack main.js -o bundle.js --mode development

打包命令二（配置了packkage的scripts）

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": " webpack main.js --output-filename build.js --output-path . --mode development"
  },

打包

npm run buidl（你配置什麼名字就打什麼名字）

打包命令三（配置了webpack.config.js）

打包

webpack

PS

使用編輯器終端的同窗注意了，因爲node的默認安全機制，它可能會阻止編輯器的終端執行腳本，所以可能會出現cmd能夠查看webpack版本和正常使用webpack，而編輯器終端則會報錯。
所以咱們須要改變node的默認安全機制
首先查看是否爲默認

get-executionpolicy

修改

set-executionpolicy remotesigned