webpack 現(xiàn)代化前端最流行的一款 構建打包工具

前端構建打包工具的發(fā)展歷史

• grunt
• gulp
• fis
• webpack
• .......

webpack 打包構建原理

基于某個入口文件，分析這個文件中的依賴。然后繼續(xù)往下尋找依賴的依賴。循環(huán)往復，最后沒有依賴了，把找到的全部都打包到一起。

webpack 核心

1. entry (入口)
2. output (出口)
3. loaders (轉換器) - webpack 將依賴都看成是一個一個的模塊。但是默認情況只能識別 js與json 兩種格式的模塊。如果想要打包圖片、樣式等資源的話，就需要相應的loader轉換器來進行轉換操作，轉換之后webpack才能識別。
4. plugins (插件) - 有一些操作轉換器也實現(xiàn)不了，這時就可以交給插件來實現(xiàn)。比如說要將某個文件直接復制到出口里面等操作。
5. mode (打包模式 4.x 版本之后提供的) - 開發(fā) | 生產(chǎn)

webpack 簡單使用 (查看文檔的指南部分)

1. 創(chuàng)建 webpack-demo
2. 初始化
3. 裝 webpack webpack-cli

運行 webpack 命令來打包

一、全局安裝了 webpack 之后，可以直接在項目下使用 webpack 命令即可。

二、項目的本地安裝

1. ./node_modules/.bin/webpack
2. 使用 npx webpack
3. npm 腳本方式

默認的入口文件是： src/index.js
默認的出口文件是： dist/main.js

如果你的入口文件或出口文件不是默認的文件的話。

可以通過 --entry 選項來告訴它使用哪個入口文件
--output 選項來告訴它使用哪個出口文件

不推薦使用選項的方式來控制，推薦是用配置文件的方式：(webpack.config.js)

一、自動幫我們生成 dist / index.html

使用一款插件，html-webpack-plugin

1. 安裝插件

npm install --save-dev html-webpack-plugin

2. 配置插件

plugins: [
  new HtmlWebpackPlugin({
    // 可以傳遞一個template選項，來控制使用哪個模板頁面來生成
    template: path.resolve(__dirname, './public/index.html')
  })
]

二、將public文件夾里面的內容直接復制到dist文件夾中。

使用一款插件，copy-webpack-plugin

1. 安裝插件

npm install --save-dev copy-webpack-plugin

2. 配置插件

plugins: [
  new CopyWebpackPlugin([
    {
      // 將 public 文件夾中的文件內容，全部拷貝至 出口文件夾中
      from: path.resolve(__dirname, './public')
    }
  ])
]

三、引入css樣式

需要兩個轉換器：style-loader | css-loader
css-loader: 將css文件轉換成 webpack 能夠識別的模塊文件
style-loader: 將css寫入到html頁面的style標簽中

1. 安裝需要的轉換器

npm install -D style-loader css-loader

2. 配置轉換器規(guī)則

module: {
    // 轉換器的配置，規(guī)則
    rules: [
      {
        test: /\.css$/,
        // 多個轉換器使用時，需要按照倒序的寫法
        use: ['style-loader', 'css-loader']
      }
    ]
  },

四、引入scss樣式

除了 style-loader | css-loader 之外還需要 sass-loader | node-sass

五、引入less樣式

除了 style-loader | css-loader 之外還需要 less-loader | less

六、引入圖片

使用 url-loader 的轉換器