webpack-基礎(chǔ)

webpack可以做什么壹将？
webpack可以看作是一個模塊打包機：它做的事情是吭产，分析項目結(jié)構(gòu)搔扁，將JavaScript模塊以及不能被瀏覽器直接運行的拓展語言（Scss践啄，TypeScript等）赚哗，轉(zhuǎn)換和打包為合適的格式供瀏覽器使用她紫。

Gulp/Grunt 和 webpack
Grunt/Gulp 一種優(yōu)化前端開發(fā)流程的工具。
工作方式：在配置文件中屿储，指明對某些文件進行編譯贿讹、組合、壓縮等任務的具體步驟够掠，工具可以自動完成這些任務民褂。

WebPack是一種模塊化的解決方案。
工作方式：把項目當作整體疯潭，通過一個給定的主文件赊堪，通過這個主文件找到項目的所有依賴文件，使用loaders處理它們袁勺，最后打包為一個或者多個瀏覽器可識別的javascript文件雹食。

webpack安裝

//本地安裝
npm i  webpack -D
//如果你使用 webpack 4+ 版本，你還需要安裝 CLI
npm i  webpack-cli -D

//全局安裝
npm i webpack -g
npm i webpack-cli -g

//工程構(gòu)建（開發(fā)時期丰、“打包”時）依賴
npm i --save-dev  <packname>  
//等價于
npm i -D  <packname>  

// 項目（運行時群叶、發(fā)布到生產(chǎn)環(huán)境時）依賴
npm i --save  <packname>  
//等價于
npm i -S  <packname>  

//創(chuàng)建文件package.json
npm init
//創(chuàng)建文件夾app/Greeter.js
//創(chuàng)建文件app/main.js
//創(chuàng)建文件public/index.html

命令一:webpack app/main.js -o public/bundle.js --mode development
問題1：webpack app/main.js public/bundle.js命令報錯和警告

WARNING in configuration
The 'mode' option has not been set, 
webpack will fallback to 'production' for this value. 
Set 'mode' option to 'development' 
or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior.
 Learn more: https://webpack.js.org/concepts/mode/

ERROR in multi ./app/main.js public/bundle.js
Module not found: Error: Can't resolve 'public/bundle.js'
 in '/******/Desktop/webpack/demo'
 @ multi ./app/main.js public/bundle.js main[1]

webpack -v //4.27.1

產(chǎn)生原因：webpack版本過高，原來的命令已經(jīng)不適用了
解決方法：更換命令
問題2：webpack app/main.js -o public/bundle.js成功和警告

WARNING in configuration
The 'mode' option has not been set, 
webpack will fallback to 'production' for this value.
Set 'mode' option to 'development' 
or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. 
Learn more: https://webpack.js.org/concepts/mode/

產(chǎn)生原因：黃色警告:是因為webpack4引入了模式,有開發(fā)模式,生產(chǎn)模式,無這三個狀態(tài)
解決方法：更換命令
webpack app/main.js -o public/bundle.js --mode development成功
命令二：webpack

//創(chuàng)建webpack.config.js
const path=require('path');
const HtmlWebpackPlugin=require('html-webpack-plugin');
module.exports = {
    devtool: 'eval-source-map',
    mode:"development",
    entry:  __dirname + "/app/main.js",//已多次提及的唯一入口文件钝荡，_dirname它指向當前執(zhí)行腳本所在的目錄
    output: {
      path: __dirname + "/public",//打包后輸出文件的存放地方
      filename: "bundle.js"http://打包后輸出文件的文件名
    }街立，
   /*entry:{
      index:'./src/index',
      news:'./src/news'
    },
   output:{
        path:path.resolve(__dirname,'dest'),//絕對路徑
        filename:'[name].bundle.min.js'
    }*/
   module:{
      rules:[
         {test:/\.less$/i,use:['style-loader','css-loader','less-loader']} //less
      ]
   },
   plugins:[
       new HtmlWebpackPlugin({template:path.resolve(__dirname,'./index.html')})
   ],
   devtool:'source-map'
  }

webpack

Path.resolve()
從后向前，
若字符以 / 開頭埠通，不會拼接到前面的路徑(因為拼接到此已經(jīng)是一個絕對路徑)赎离；
若以 ../ 開頭，拼接前面的路徑端辱，且不含最后一節(jié)路徑梁剔；
若以 ./ 開頭或者沒有符號則拼接前面路徑虽画；
命令三：npm start / npm run dev /npm run build

//接命令二
 "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev":"webpack --mode development",
    "bulid":"webapck --mode production",
    "start": "webpack"
 }

命令四：npm run server

npm install --save-dev webpack-dev-server
//webpack.config.js
   devServer: {
        contentBase: "./public",//本地服務器所加載的頁面所在的目錄
        historyApiFallback: true,//不跳轉(zhuǎn)
        inline: true//實時刷新
    } 
//package.json
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack --mode development",
    "bulid": "webapck --mode production",
    "start": "webpack",
    "server": "webpack-dev-server --open"
  }
npm run server//http://localhost:8080/

package.json

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server --env.development --open",
    "build": "webpack --env.production"
  }

webpack.config.js
1、mode:模式
none 不優(yōu)化
development 輸出調(diào)試信
production最高優(yōu)化荣病，啟用壓縮码撰，忽略錯誤
process.env.NODE_ENV
process 是 node 的全局變量，并且 process 有 env 這個屬性个盆，但是沒有 NODE_ENV 這個屬性脖岛。
a.這個變量并不是 process.env 直接就有的，而是通過設置得到的颊亮。

process.env.NODE_ENV=development 
process.env.NODE_ENV=production

b.這個變量的作用是：我們可以通過判斷這個變量區(qū)分開發(fā)環(huán)境或生產(chǎn)環(huán)境柴梆。

if(process.env.NODE_ENV === 'development'){ 
    //開發(fā)環(huán)境 do something
}else{
    //生產(chǎn)環(huán)境 do something
}

2、entry:入口
單入口-SPA
多入口-MPA

//單入口
const path=require('path');
module.exports={
    mode:'production',
    entry:'./src/index.js',
    output:{
        path:path.resolve(__dirname,'dest'),//絕對路徑
        filename:'bundle.min.js'
    }
}
//多入口
const path=require('path');
module.exports={
    mode:'production',
    entry:{
      index:'./src/index',
      news:'./src/news'
    },
    output:{
        path:path.resolve(__dirname,'dest'),//絕對路徑
        filename:'[name].bundle.min.js'
    }
}

3终惑、output:輸出

{
path:路徑-必須是絕對路徑 path.resolve
filename:文件名
}

4绍在、loader
https://www.webpackjs.com/loaders/
webpack 可以使用 loader來預處理文件。這允許你打包除 JavaScript 之外的任何靜態(tài)資源雹有。你可以使用 Node.js 來很簡單地編寫自己的 loader揣苏。
文件
raw-loader 加載文件原始內(nèi)容（utf-8）
val-loader 將代碼作為模塊執(zhí)行，并將 exports 轉(zhuǎn)為 JS 代碼
url-loader 像 file loader 一樣工作件舵，但如果文件小于限制，可以返回 data URL
file-loader 將文件發(fā)送到輸出文件夾脯厨，并返回（相對）URL
json
json-loader 加載 JSON 文件（默認包含）
json5-loader 加載和轉(zhuǎn)譯 JSON 5 文件
cson-loader 加載和轉(zhuǎn)譯 CSON 文件
轉(zhuǎn)換編譯(Transpiling)
script-loader 在全局上下文中執(zhí)行一次 JavaScript 文件（如在 script 標簽）铅祸，不需要解析
babel-loader 加載 ES2015+ 代碼，然后使用 Babel 轉(zhuǎn)譯為 ES5
buble-loader 使用 Bublé 加載 ES2015+ 代碼合武，并且將代碼轉(zhuǎn)譯為 ES5
traceur-loader 加載 ES2015+ 代碼临梗，然后使用 Traceur 轉(zhuǎn)譯為 ES5
ts-loader 或 awesome-typescript-loader 像 JavaScript 一樣加載 TypeScript 2.0+
coffee-loader 像 JavaScript 一樣加載 CoffeeScript
模板(Templating)
html-loader 導出 HTML 為字符串，需要引用靜態(tài)資源
pug-loader 加載 Pug 模板并返回一個函數(shù)
jade-loader 加載 Jade 模板并返回一個函數(shù)
markdown-loader 將 Markdown 轉(zhuǎn)譯為 HTML
react-markdown-loader 使用 markdown-parse parser(解析器) 將 Markdown 編譯為 React 組件
posthtml-loader 使用 PostHTML 加載并轉(zhuǎn)換 HTML 文件
handlebars-loader 將 Handlebars 轉(zhuǎn)移為 HTML
markup-inline-loader 將內(nèi)聯(lián)的 SVG/MathML 文件轉(zhuǎn)換為 HTML稼跳。在應用于圖標字體盟庞，或?qū)?CSS 動畫應用于 SVG 時非常有用。
樣式
style-loader 將模塊的導出作為樣式添加到 DOM 中
css-loader 解析 CSS 文件后汤善，使用 import 加載什猖，并且返回 CSS 代碼
less-loader 加載和轉(zhuǎn)譯 LESS 文件
sass-loader 加載和轉(zhuǎn)譯 SASS/SCSS 文件
postcss-loader 使用 PostCSS 加載和轉(zhuǎn)譯 CSS/SSS 文件
stylus-loader 加載和轉(zhuǎn)譯 Stylus 文件
清理和測試(Linting && Testing)
mocha-loader 使用 mocha 測試（瀏覽器/NodeJS）
eslint-loader PreLoader，使用 ESLint 清理代碼
jshint-loader PreLoader红淡，使用 JSHint 清理代碼
jscs-loader PreLoader不狮，使用 JSCS 檢查代碼樣式
coverjs-loader PreLoader，使用 CoverJS 確定測試覆蓋率
框架(Frameworks)
vue-loader 加載和轉(zhuǎn)譯 Vue 組件
polymer-loader 使用選擇預處理器(preprocessor)處理在旱，并且 require() 類似一等模塊(first-class)的 Web 組件
angular2-template-loader 加載和轉(zhuǎn)譯 Angular 組件

6摇零、插件（Plugins）
loaders是在打包構(gòu)建過程中用來處理源文件的（JSX，Scss桶蝎，Less..）驻仅，一次處理一個谅畅，插件并不直接操作單個文件，它直接對整個構(gòu)建過程其作用噪服。
HtmlWebpackPlugin
這個插件的主要功能是在打包結(jié)束之后毡泻，自動在輸出目錄下生成一個html文件，并把打包生成的JS文件自動的引入到這個html文件中芯咧。
npm install --save-dev html-webpack-plugin

const HtmlWebpackPlugin=require('html-webpack-plugin');
const path=require('path');
plugins:[
      new HtmlWebpackPlugin({template:path.resolve(__dirname,'./index.html')})
]

7牙捉、devtool:"source-map"