webpack4+ 學習1

基本概念

webpack提供mode選項，配置webpack相應模式的內置優化

//webpack.production.config.js
module.exports = {
   mode: "production",
}

入口文件（entry）

入口文件，即起始文件

入口起點（entry point）指示webpack應該使用那個模塊，來做爲構建其內部依賴圖的開始，進入入口起點後，webpack

會找出那些模塊和庫是入口起點依賴的

能夠在webpack的配置文件中配置入口，配置節點爲：entry, 固然能夠配置一個入口，也能夠配置多個。

輸出（output）

output屬性告訴webpack在哪裏輸出它所建立的bundles, 以及如何命名這些文件

 

const path = require('path');
module.exports = {
    entry: './src/index.js',
    mode: 'development',
    output: {
        filename: 'main.js',
        path: path.resolve(__dirname, 'dist/static/js') 
    }
}

 

loader

loader讓webpack可以去處理那些非javascript文件（webpack自身理解爲javascript）。loader能夠將全部類型的文件

轉換爲webpack可以處理的有效模塊，而後你就能夠利用webpack的打包能力，對他們進行處理裏。

插件（plugins）

loader被用於轉換某些類型模塊。而插件則能夠用於執行範圍更廣的任務。插件的範圍包括，從打包優化和壓縮

一直到從新定義環境中的變量。插件接口功能及其強大，能夠用來處理各類各樣的任務

webpack安裝

 

請確保安裝了node.js的最新版本。而本身已經在你的項目下已經初始化好了最基本的package.json文件

初始化命令：

 

npm init -y

 

本地安裝webpack

 

npm install --save-dev webpack
# 若是你使用webpack 4+ 版本，你須要安裝cli
npm install --save-dev webpack-cli

 

安裝完成後，能夠添加npm的script腳本

//package.json
"scripts": {
   "start": 'webpack --config webpack.config.js'
}

全局安裝webpack不推薦,會影響其餘舊的項目