webpack入門教程(基礎)

1.概念

webpack 是一個"模塊打包器",它能根據模塊的依賴關係遞歸的構建一個依賴關係圖,當中包含了應用程序需要的所有模塊,最後打包成一個或多個bundle

模塊打包器:它做的事情是,它做的事情是，分析你的項目結構，找到JavaScript模塊(commonJs)以及其它的一些瀏覽器不能直接運行的拓展語言（Scss，jsx,.vue)等,並將其打包爲合適的格式以供瀏覽器使用

2.安裝webpack

1.全局安裝

$ npm install -g webpack webpack-cli 

2.局部安裝

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

注意:不同於webpack 3.x,webpack-cli 在webpack 4中被分離了,所以需要同時安裝兩個庫

3.webpack 4個核心概念

• entry()
• output(輸出)
• loader(轉換器)
• plugins(插件)

1.entry(入口)

entry 入口用於指引webpack應該先從哪個模塊開始,它是構建的入口,之後webpack會自動找出應用內其他相互依賴的內容進行打包.通過在webpack配置文件中配置entry屬性來指定入口,雖然一般項目中只指定一個入口,但是實際上可以指定多個入口的

entry配置示例

module.exports={
    entry:'./src/app.js'
}

2.output(出口)

output出口 用於告訴webpack所構建的bundles在哪裏輸出,默認路徑是 ./dist

output配置示例

module.exports={
    entry:'./src/app.js',
    output:{
        path:__dirname+'dist',//必須是絕對路徑
        filename:'bundle.js'
    }
}

上面配置通過 output.path和output.filename屬性來自定義webpack打包後bundle的路徑和名稱

3.loader(轉換器)

loader用於配置webpack處理一些非js文件,因爲 webpack本身只能理解javascript.

loader配置示例

module.exports = {
    //入口起點
    entry: {
        main: __dirname + '/src/index.js'
    },
    //出口
    output: {
        path: __dirname + '/dist',//必須是絕對路徑
        filename: 'bundle.js'
    },
    //模塊處理
    module: {
        rules: [
            {
                test: '/\.scss$/',//用於標識出應該被對應的 loader 進行轉換的某個或某些文件。
                use: 'scss-loader'//表示進行轉換時，應該使用哪個 loader。
            }
        ]
    }
}

上面的配置中,loader的test屬性告訴webpack需要處理的對象,use屬性告訴webpack用什麼去處理.當webpack打包的時候會識別所有的後綴爲.scss的文件,並用scss-loader轉換.

4.plugins(插件)

plugins插件的主要作用是打包優化,壓縮等,它的功能和loader一樣非常強大,使用任何插件時,只需要require引入進來即可

plugins配置示例

var { VueLoaderPlugin } = require("vue-loader")//通過npm安裝

module.exports = {
    //入口起點
    entry: {
        main: __dirname + '/src/index.js'
    },
    //出口
    output: {
        path: __dirname + 'dist',//必須是絕對路徑
        filename: 'bundle.js'
    },
    //模塊處理
    module: {
        rules: [
            {
                test: '/\.scss$/',//用於標識出應該被對應的 loader 進行轉換的某個或某些文件。
                use: 'scss-loader'//表示進行轉換時，應該使用哪個 loader。
            }
        ]
    },
    plugins: [
        // vue編譯需要插件的支持
        new VueLoaderPlugin()
    ]
}

5.webpack 模式

在項目中,會區分開發環境( development )和生產環境(production),兩種環境,可以通過mode參數來配置

配置示例:

module.exports={
    mode:'production'  //  production||development 
}

4.使用webpack

這是我webpack構建的小示例,文件目錄:
│ index.html
│ package-lock.json
│ package.json
│ webpack.config.js
├─dist
│ bundle.js
└─src
│ app.js
├─css
│ index.scss

1.初始化

構建項目時,我們首先都要做的一件事就是npm init 初始化項目,然後生成一個package.json的文件

$ npm init -y

2.局部安裝webpack

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

3.逐漸安裝loader

a.將es6語法轉爲瀏覽器識別的es5語法

babel-loader ( ES6 => ES5 ,react) (babel-loader@7 babel-core babel-preset-es2015)

$ npm i babel-loader@7 babel-core babel-preset-es2015 -D

b. 將css 文件當成模塊處理

css-loader,style-loader

$ npm i css-loader style-loader  -D

c. scss 編譯生成css文件

sass-loader node-sass

$ cnpm i sass-loader node-sass  -D  //node-sass使用npm下載比較慢,這裏使用了cnpm

d.文件 copy 到目標文件夾

file-loader url-loader

$ npm i file-loader  url-loader  -D

注意:url-loader可以設置圖片大小限制，當圖片超過限制時，其表現行爲等同於 file-loader，而當圖片不超過限制時，則會將圖片以base64的形式打包進css文件，以減少請求次 數。

e.處理css兼容

postcss-loader autoprefixer postcss

$ npm i postcss-loader autoprefixer postcss  -D

4.配置文件webpack.config

var { VueLoaderPlugin } = require("vue-loader")//通過npm安裝


module.exports = {
    //模式，區分開發環境或生產環境
    mode:'production',// production||development 
    //監聽文件修改
    watch:true,
    //熱更新
    devServer:{
        contentBase: './', //以當前目錄爲項目的根目錄
        port: '3000',
        inline:true,//實時刷新
    },
    //入口起點
    entry: {
        main: __dirname + '/src/app.js'
    },
    //出口
    output: {
        path: __dirname + '/dist',//必須是絕對路徑
        filename: 'bundle.js'//輸出的文件名
    },
    //模塊處理
    module: {
        rules: [
            {test: /\.css$/, use:['style-loader','css-loader']},//配置處理.css文件的第三方處理規則
            {test: /\.less$/, use: ["style-loader",'css-loader','less-loader']},
            {test: /\.scss$/, use: ["style-loader",'css-loader','postcss-loader','sass-loader']},
            {test: /\.(jpg|png|gif|bmp|jpeg)$/, use: "url-loader?limit=8000"},
            {test: /\.(tff|eot|svg|woff|woff2)$/, use: "url-loader"},
            {test:/\.js$/, use:'babel-loader',exclude:/node_modules/},
            {test: /\.vue$/, use: 'vue-loader'}
        ]
    },
    // plugins: [
    //     // vue編譯需要插件的支持
    //    new VueLoaderPlugin()
    // ]
}

上述中可以通過watch屬性來監聽文件的改變,通過devServer實現熱更新

package.json配置:

 "scripts": {
    "dev": "webpack",
    "start": "webpack-dev-server" //熱更新,直接npm start
  },

注意:在package.json中配置webpack.config.js的執行環境時,最完整的寫法是

"scripts": {
    "dev": "webpack --config ./webpack.config.js"
  },

其中,參數–config用於指定讀取哪個配置文件.如果沒有指定–config,webpack會默認讀取webpack.config.js或webpackfile.js文件.項目中通常會配置兩三個webpack配置文件.命名一般會帶上環境,如webpack.config.base.js, webpack.config.dev.js和webpack.config.prod.js

然後終端執行

$ npm run dev 

webpack基礎介紹就在這裏了,後面會詳細講解webpack的配置選項