對於webpack4.0配置的詳解

這篇文章主要介紹了關於webpack4.0配置的詳解，有著一定的參考價值，現在分享給大家，有需要的朋友可以參考一下

前言

機會總是留給有準備的人，要想在這兵荒馬亂的求職季裡出類拔萃，拿下你心中期待已久的offer。那麼你更因該知道很多別人不知道的東西，你的羽翼才能豐滿，才能翱翔在天際。鷹擊長空，靠的不是天生，而是年少時斷崖之險。笨鳥先飛，靠的不是智慧，而是孜孜不倦的努力。

webpack詳解

webpack是一個打包工具，他的宗旨是一切靜態資源即可打包。有人就會問為什麼要webpack？ webpack是現代前端技術的基石，常規的開發方式，例如jquery,html,css靜態網頁開發已經落後了。現在是MVVM的時代，資料驅動介面。 webpack將現代js開發中的各種新型有用的技術，集合打包。 webpack的描述鋪天蓋地，我就不浪費大家的時間了。理解下這種圖就知道webpack的生態圈了:

webpack4.0的配置

const path = require('path');  //引入node的path模块
const webpack = require('webpack'); //引入的webpack,使用lodash
const HtmlWebpackPlugin = require('html-webpack-plugin')  //将html打包
const ExtractTextPlugin = require('extract-text-webpack-plugin')     //打包的css拆分,将一部分抽离出来  
const CopyWebpackPlugin = require('copy-webpack-plugin')
// console.log(path.resolve(__dirname,'dist')); //物理地址拼接
module.exports = {
    entry: './src/index.js', //入口文件  在vue-cli main.js
    output: {       //webpack如何输出
        path: path.resolve(__dirname, 'dist'), //定位，输出文件的目标路径
        filename: '[name].js'
    },
    module: {       //模块的相关配置
        rules: [     //根据文件的后缀提供一个loader,解析规则
            {
                test: /\.js$/,  //es6 => es5 
                include: [
                    path.resolve(__dirname, 'src')
                ],
                // exclude:[], 不匹配选项（优先级高于test和include）
                use: 'babel-loader'
            },
            {
                test: /\.less$/,
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: [
                    'css-loader',
                    'less-loader'
                    ]
                })
            },
            {       //图片loader
                test: /\.(png|jpg|gif)$/,
                use: [
                    {
                        loader: 'file-loader' //根据文件地址加载文件
                    }
                ]
            }
        ]                  
    },
    resolve: { //解析模块的可选项  
        // modules: [ ]//模块的查找目录 配置其他的css等文件
        extensions: [".js", ".json", ".jsx",".less", ".css"],  //用到文件的扩展名
        alias: { //模快别名列表
            utils: path.resolve(__dirname,'src/utils')
        }
    },
    plugins: [  //插进的引用, 压缩，分离美化
        new ExtractTextPlugin('[name].css'),  //[name] 默认  也可以自定义name  声明使用
        new HtmlWebpackPlugin({  //将模板的头部和尾部添加css和js模板,dist 目录发布到服务器上，项目包。可以直接上线
            file: 'index.html', //打造单页面运用 最后运行的不是这个
            template: 'src/index.html'  //vue-cli放在跟目录下
        }),
        new CopyWebpackPlugin([  //src下其他的文件直接复制到dist目录下
            { from:'src/assets/favicon.ico',to: 'favicon.ico' }
        ]),
        new webpack.ProvidePlugin({  //引用框架 jquery  lodash工具库是很多组件会复用的，省去了import
            '_': 'lodash'  //引用webpack
        })
    ],
    devServer: {  //服务于webpack-dev-server  内部封装了一个express 
        port: '8080',
        before(app) {
            app.get('/api/test.json', (req, res) => {
                res.json({
                    code: 200,
                    message: 'Hello World'
                })
            })
        }
    }
    
}

一、前端環境搭建

我們使用npm或yarn來安裝webpack

npm install webpack webpack-cli -g 
# 或者 
yarn global add webpack webpack-cli

為什麼webpack會分成兩個檔案？在webpack3中，webpack本身和它的cli以前都是在同一個套件中，但在第4版中，他們已經將兩者分開來更好地管理它們。

新建一個webpack的資料夾，在其下新建一個try-webpack(防止init時專案名稱和安裝套件同名)並初始化和設定webpack。

 npm init -y  //-y 默认所有的配置
 yarn add webpack webpack-cli -D  //-D webpack安装在devDependencies环境中

二、部署webpack

在上面搭建好的環境專案中，我們來到package.json裡設定我們的scripts,讓webpack

  "scripts": {
    "build": "webpack --mode production" //我们在这里配置，就可以使用npm run build 启动我们的webpack
  },
  "devDependencies": {
    "webpack": "^4.16.0",
    "webpack-cli": "^3.0.8"
  }

配置好我們webpack的運行環境時，聯想下vue-cli。平常使用vue-cli會自動幫我們設定並產生專案。我們在src下進行專案的開發，最後npm run build 打包產生我們的dist的目錄。不知道你是否還記得，還是讓我們進入下一節讓我們感受下這其中的正個流程吧。

三、npm run build 發生了什麼

在我們的根專案下try-webpack新建一個src目錄。在src目錄下新建一個index.js檔。在裡面我們可以寫任意的程式碼，以案例為主:

const a = 1;

#寫完之後我們在終端機運行我們的命令npm run build；你會發現新增加了一個dist目錄，裡面存放著webpack打包好的main.js檔。這和我們在vue-cli裡操作是一樣的。

四、webpackp設定流程篇

我們在開發是一般會打包src下的什麼檔案呢？我們可以回想一下，其實vue-cli專案src下不就這幾點嘛：

• #發佈時需要的html，css，js

• css預編譯器stylus，less，sass

• es6的高階語法

• 圖片資源.png，.gif，.ico， .jpg

• 檔案間的require

• #別名@等修飾符

##那麼我將會分這幾點來講解webpack中webpack.config.js的配置，跟著腳步，一步一步來完成我們的流程的線。

✍️Html在webpack中的配置

在專案的根目錄try-webpack下新建webpack.config.js文件，以commonJS模組化機制向外輸出,並且新建一個index. html。

module.exports = {}

配置我們的入口entry，在vue-cli裡相當於跟目錄下的main.js，我們的出口output。我們可以把webpack理解為一個工廠，進入相當於把各種各樣的原料放進我們的工廠了，然後工廠進行一系列的打包操作把打包好的東西，向外輸出，然後就可以去出售了(上線)。

const path = require('path'); //引入我们的node模块里的path
//测试下 console.log(path.resolve(__dirname,'dist')); //物理地址拼接
module.exports = {
    entry: './src/index.js', //入口文件  在vue-cli main.js
    output: {       //webpack如何向外输出
        path: path.resolve(__dirname, 'dist'),//定位，输出文件的目标路径
        filename: '[name].js' //文件名[name].js默认，也可自行配置
    },

HTML打包我們需要安裝引入html-webpack-plugin

yarn add html-webpack-plugin -D //在开发环境中安装
const HtmlWebpackPlugin = require('html-webpack-plugin')  //引入打包我们的HTML

在module.exports裡配置我們的plugins(插件):

 plugins: [  //插进的引用, 压缩，分离美化
        new HtmlWebpackPlugin({  //将模板的头部和尾部添加css和js模板,dist 目录发布到服务器上，项目包。可以直接上线
            file: 'index.html', //打造单页面运用 最后运行的不是这个
            template: 'src/index.html'  //vue-cli放在跟目录下
        }),
    ],

配置好後，在終端輸入npm run dev後webpack將我們的html打包好並且自動將我們的js引進了。

    <p>Hello World</p>
<script></script>

live-sever我們的dist目錄，啟動一個8080端口，我們就可以看到我們的Hello World了。這就是我們上線版的頁面。

以上是對於webpack4.0配置的詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！