webpack 構建前端項目（1）

webpack是一個現代 JavaScript 應用程序的靜態模塊打包器(module bundler)。當 webpack 處理應用程序時，它會遞歸地構建一個依賴關係圖(dependency graph)，其中包含應用程序須要的每一個模塊，而後將全部這些模塊打包成一個或多個bundle。

後續章節

webpack構建前端項目2

webpack構建前端項目3

搭建webpack

新建項目 npm init -y 生成package.json 文件;

npm init -y複製代碼

安裝 webpack 和 webpack-cli

npm i webpack webpack-cli -D複製代碼

在文件根目錄新建一個 webpack.config.js 文件，新建src目錄，在 src目錄下新建main.js做爲入口文件。webpack.config.js代碼以下

const path=require('path')
module.exports={    
entry:path.resolve(__dirname,'src/main.js'),  //入口文件    
output:{  //輸出文件        
    filename:'index.js',        
    path:path.resolve(__dirname,'dist')
}}複製代碼

入口文件若是不寫，默認是src目錄下的index.js文件，在 package.json 文件中 加入腳本啓動

"scripts": {
    "build":"webpack"
 }複製代碼

在命令行輸入 npm run build ,可看到 dist目錄下生成了 index.js。

資源處理

webpack在處理各類類型的資源時，需用到各資源的loader 

處理圖片資源

處理圖片資源使用 file-loader url-loader,在命令行輸入

npm i file-loader url-loader -D複製代碼

webpack.config.js中添加 

module.exports = {
  entry: path.resolve(__dirname, 'src/main.js'),
  output: {
    filename: 'index.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [{
      test: /\.(jpe?g|png|gif|svg)(\?.*)?$/,
      use: [{
        loader: "url-loader",
        options: {
          limit: 10000,
          filename: '[name].[hahs:5].[ext]',
          outputPath: 'imgs/'
        }
      }]
    }]
  }}
複製代碼

limit選項將小於此大小的圖片轉換爲base64，以base64字符串形式內聯進項目中；outputPath是打包後的圖片所在的目錄。

處理js文件

應用babel-loader把es6 7語法轉換成瀏覽器支持度高的es5語法，參考小諾哥的作法：

npm i babel-loader @babel/core @babel/preset-env @babel/runtime @babel/plugin-transform-runtime -D複製代碼

webpack.config.js 中添加

module.exports = {
    module: {
        rules: [
            ...
            {
            test: /\.js$/,
            exclude: /node_modules/,
            use: ['babel-loader?cacheDirectory']
            }
        ]
    }}
複製代碼

在文件更目錄下新建 .babelrc 文件

{
    "presets": [
        ["@babel/preset-env"]
    ],
    "plugins": [
        [
         "@babel/plugin-transform-runtime",
          {
            "corejs": false,
            "helpers": true,
            "regenerator": true,
            "useESModules": false,
            "absoluteRuntime": "@babel/runtime"
          }
        ]
    ]}   

複製代碼

處理css、less文件

命令行安裝

npm i style-loader css-loader less less-loader複製代碼

webpack.config.js 中添加

module.exports = {
    entry: path.resolve(__dirname, 'src/main.js'),
    output: {
        filename: 'index.js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [
            ...
            {
            test: /\.(le|c)ss$/,
            use: ['style-loader', 'css-loader', 'less-loader']
            }
        ]
    }}
     

複製代碼

use 的處理順序是右往左處理 對css、less 文件依次進行處理，

處理vue文件 

命令行輸入

npm i vue vue-loader vue-style-loader vue-template-compiler -D複製代碼

在webpack.config.js中的插件中引入vuePlugin; vue-style-loader替換掉style-loader:

參考vue-loader官網

const vuePlugin = require('vue-loader/lib/plugin')
module.exports = {
    ...    
    module: {
        rules: [
            ....
             {
                test: /\.(le|c)ss$/,
                use: ['vue-style-loader', 'css-loader', 'less-loader']
            },
             {
                test: /\.vue$/,
                use: ['vue-loader']
            }
        ]
    },
    plugins: [new vuePlugin()]
}複製代碼

在src 下 新建一個app.vue文件，

<template>
    <h1>hello world</h1></template>
<script>
    export default {}
</script>
<style></style>
複製代碼

在src/main.js中引入 app.vue 建立 vue對象

import App from './app'import Vue from 'vue'
let ele = document.createElement('div')
ele.id = 'root'document.body.appendChild(ele) 
new Vue({
    el: '#root',
    render: h => h(App)
})
複製代碼

運行 npm run build生成 打包後的 index.js ,新建一個html文件，script引入 index.js便可在瀏覽器中查看效果

plugins插件

插件是 webpack 的支柱功能，插件目的在於解決 loader 沒法實現的其餘事

clean-webpack-plugin

用 clean-webpack-plugin 能夠自動清除output打包的目錄，不用本身手動清理

npm i clean-webpack-plugin -D複製代碼

在webpack.config.js中

const { CleanWebpackPlugin} = require('clean-webpack-plugin') 
module.exports = {    
   ...    
   plugins: [        
     ...        
    new CleanWebpackPlugin()    
]}複製代碼

html-webpack-plugin

用html-webpack-plugin能夠在打包的目錄生成一個html文件，並在html中自動引入打包好的js、css等文件

npm i html-webpack-plugin -D複製代碼

新建目錄template,在tempalte目錄中新建template.html文件做爲模板文件。

在webpack.config.js中

const htmlPlugin=require('html-webpack-plugin')

module.exports={
   ...  
   plugins:[ 
    ...    
    new htmlPlugin({
       template:'template/template.html'
    })  
  ]
}複製代碼

resolve和externals

配置了webpack.resolve.extensions,在引入文件時，自動補全文件的後綴名。webpack.resolve.alias配置路徑別名。

const res = (p) => path.join(process.cwd(), p);
module.exports = {
    resolve: {
        extensions: ['.js', '.vue', '.json'],
        alias: {
            '@': res('src'),
            '@style': res('src/common/style'), 
           '@js': res('src/common/js'),
            '@mock': res('mock'),
            '@component': res('src/component')
        }
    },
    externals: {
        'axios': 'axios'
    }}
複製代碼

配置在externals中的項目，webpack在打包時會進行過濾，通常用於cdn加速