webpack超詳細(xì)配置, 使用教程(圖文)

博主在這里就不詳細(xì)介紹webpack來(lái)源以及作用了, 本篇博文面向新手主要說(shuō)明如何配置webpack, 以及webpack的使用方法, 直到創(chuàng)建出一個(gè)合理的屬于自己webpack項(xiàng)目;

流程

webpack安裝

  • Step 1: 首先安裝Node.js, 可以去Node.js官網(wǎng)下載.

  • Step2: 在Git或者cmd中輸入下面這段代碼, 通過全局先將webpack指令安裝進(jìn)電腦中
    npm install webpack -g

  • Step3: 使用Git Bash here 或者 cmd cd命令使當(dāng)前目錄轉(zhuǎn)到當(dāng)前項(xiàng)目的目錄下, 然后輸入下面這段命令
    npm init

    這里寫圖片描述

    接下來(lái)會(huì)彈出一些信息, 就是一些項(xiàng)目名和一些參數(shù)的描述, 可以全部按回車使用默認(rèn)信息, 完成之后項(xiàng)目文件夾下會(huì)生成一個(gè)package.json的文件
    這里寫圖片描述

    這樣webpack就安裝完成了.



webpack配置

  • Step1: 創(chuàng)建項(xiàng)目文件夾, 名字自起, 但路徑名不要包含中文, 以及項(xiàng)目名也不要叫"webpack", 并且不要包含大寫字母.
    例:

    這里寫圖片描述

  • Step2: 接下來(lái)創(chuàng)建并編寫配置文件. 首先我們先介紹幾個(gè)配置文件的參數(shù).

    • entry： 是 頁(yè)面入口文件配置 （html文件引入唯一的js 文件）
    • output：對(duì)應(yīng)輸出項(xiàng)配置
      • path ：入口文件最終要輸出到哪里，
      • filename：輸出文件的名稱
      • publicPath：公共資源路徑

  • Step3: 在你的項(xiàng)目目錄下創(chuàng)建webpack.config.js配置文件, 通過這個(gè)文件進(jìn)行webpack的配置, 并且還要?jiǎng)?chuàng)建一些路徑保存基本文件. 例如:

    這里寫圖片描述

    src文件夾
    這里寫圖片描述

  • Step4: 在src的js下創(chuàng)建一個(gè)入口文件, 我創(chuàng)建的叫做entry.js, 在項(xiàng)目目錄再創(chuàng)建一個(gè)index.html用來(lái)調(diào)試使用. 編寫webpack.config.js文件,

    //webpack.config.js
module.exports = {
    entry : './src/js/entry.js',//入口文件
    output : {//輸出文件
        filename : 'index.js',//輸出文件名
        path : __dirname + '/out'//輸出文件路徑
    },

}
```
我們隨便在index.html和入口文件entry.js寫點(diǎn)什么看看是否成功配置,

```
//index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>ss</title>
</head>
<body>
111
    <script src="./out/index.js"></script>//注意在這里引入的是打包完成的js文件
</body>
</html>
```


```javascript
//entry.js
console.log('1234');
```
之后使用Git Bash here 或者 cmd cd命令使目錄為當(dāng)前項(xiàng)目目錄, 輸入**webpack**或者**webpack -w**命令, 查看index.html是否成功console出1234;

webpack 和 webpack -w 區(qū)別
webpack -w可以對(duì)項(xiàng)目打包并且實(shí)時(shí)監(jiān)控, 當(dāng)前配置文件下的文件如果發(fā)生更改時(shí)重新打包, 但如果webpack的配置文件即webpack.config.js更改時(shí)還是要通過webpack進(jìn)行打包.(退出webpack -w 操作 ctrl+c)

webpack loader加載器

接下來(lái)我們繼續(xù)配置loader, 通過加載器處理文件：比如 sass less 等, 告知 webpack 每一種文件都需要使用什么加載器來(lái)處理。

  • **Step1: **為了方便我們先統(tǒng)一把所有的包都先下載下來(lái), 下面再慢慢解釋.

    npm install babel-loader babel babel-core css-loader style-loader  url-loader file-loader less-loader less  --save-dev


  • **Step2: **下載完成后, 我們修改webpack.config.js文件, 將加載器引入.

    module.exports = {
    entry :  './src/js/entry.js',
    output : {
        filename : 'index.js',
        path : __dirname + '/out'
    },
    module : {
        rules: [
            {test: /.js$/, use: ['babel-loader']},
            {test: /.css$/, use: ['style-loader', 'css-loader']},/*解析css, 并把css添加到html的style標(biāo)簽里*/
            //{test: /.css$/, use: ExtractTextPlugin.extract({fallback: 'style-loader',use: 'css-loader'})},/*解析css, 并把css變成文件通過link標(biāo)簽引入*/
            {test: /.(jpg|png|gif|svg)$/, use: ['url-loader?limit=8192&name=./[name].[ext]']},/*解析圖片*/
            {test: /.less$/, use: ['style-loader', 'css-loader', 'less-loader']}/*解析less, 把less解析成瀏覽器可以識(shí)別的css語(yǔ)言*/
        ]
    },
    }


  • **Step3: **接下來(lái)我們先測(cè)試css, 我們?cè)陧?xiàng)目文件夾下的src文件夾下創(chuàng)建index.css. 隨便寫一點(diǎn)屬性. 

    //index.css
.demo1 {
    width: 100px;
    height: 100px;
    background: red;
}
.demo2 {
    width: 200px;
    height: 200px;
    background: orange;
}

    //index.html
<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="UTF-8" />
<title>text</title>
</head>
<body>
<div class="demo1"></div>
<div class="demo2"></div>
<script src="./out/index.js"></script>
</body>
</html>
```
因?yàn)樵趙ebpack中所有文件都是模塊, 所以必須要將css引入. 在剛剛的entry.js中添加如下代碼.

```javascript
//entry.js
require('../css/index.css');//引入css文件
console.log("1234");
```

打包webpack一下看看效果
![這里寫圖片描述](http://upload-images.jianshu.io/upload_images/8424049-c8847d98630a9e55?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)<br>

  • **Step4: **當(dāng)有多個(gè)js文件時(shí), 如何進(jìn)行引入呢? 接下來(lái)我們做一個(gè)簡(jiǎn)單小功能來(lái)說(shuō)明這個(gè)問題, 讓我們點(diǎn)擊方塊的時(shí)候, 方塊變大.

    接下來(lái)在src的js文件夾下創(chuàng)建一個(gè)基本的工具tool.js (很多小的問題都被我擴(kuò)大化了, 只是為了說(shuō)明問題不一定適用)

    //tool.js
var tool = {//獲取DOM元素
    getDom: function(className) {
        return document.getElementsByClassName(className)[0];
    }
}

module.exports = tool;//模塊出口

    src的js下創(chuàng)建一個(gè)demo1.js文件, demo2.js同理

    var obj = require('./tool.js');
    var demo1 = {
    init: function() {
        this.bindEvent();
    },
    bindEvent: function() {
        //var demo1 = document.getElementsByClassName('demo1')[0];
        var demo1 = obj.getDom('demo1');
        demo1.onclick = this.changeStyle;
    },
    changeStyle: function() {
        this.style.width = '200px';
        this.style.height = '200px';
        this.style.background = 'green';
        console.log('1');
    }
}

module.exports = demo1;

    修改入口文件entry.js

    require('../css/index.css');

var demo1 = require('../js/demo1.js');
var demo2 = require('../js/demo2.js');

    demo1.init();
    demo2.init();

    webpack一下, 看看效果


    這里寫圖片描述


關(guān)于圖片的打包

  • **Step1: **在img文件夾下隨便找一個(gè)小一點(diǎn)的圖片放進(jìn)去.

  • **Step2: **修改entry.js

    require('../css/index.css');

var demo1 = require('../js/demo1.js');
var demo2 = require('../js/demo2.js');

    demo1.init();
    demo2.init();

var oImg = new Image();
oImg.src = require('../img/1.gif');//當(dāng)成模塊引入圖片
document.body.appendChild(oImg);

    由于我們引入的是靜態(tài)資源, 在webpack.config.js中修改一下

    module.exports = {
        entry :  './src/js/entry.js',
        output : {
            filename : 'index.js',
            publicPath: __dirname + '/out',//添加靜態(tài)資源, 否則會(huì)出現(xiàn)路徑錯(cuò)誤
            path : __dirname + '/out'
        },
        module : {
            rules: [
                {test: /.js$/, use: ['babel-loader']},
                {test: /.css$/, use: ['style-loader', 'css-loader']},/*解析css, 并把css添加到html的style標(biāo)簽里*/
                //{test: /.css$/, use: ExtractTextPlugin.extract({fallback: 'style-loader',use: 'css-loader'})},/*解析css, 并把css變成文件通過link標(biāo)簽引入*/
                {test: /.(jpg|png|gif|svg)$/, use: ['url-loader?limit=8192&name=./[name].[ext]']},/*解析圖片*/
                {test: /.less$/, use: ['style-loader', 'css-loader', 'less-loader']}/*解析less, 把less解析成瀏覽器可以識(shí)別的css語(yǔ)言*/
            ]
        },
}

    大家自己webpack看看效果


webpack進(jìn)階設(shè)定

我們?cè)陧?xiàng)目中有多個(gè)html文件時(shí)怎么處理呢?, 接下來(lái)我們重新設(shè)定配置文件, webpack.config.js

    module.exports = {
            entry : {index1: './src/js/entry.js', index2: './src/js/entry2.js'},
        output : {
                filename : '[name].js',//這樣就可以生成兩個(gè)js文件, 名字分別為index1.js, 和index2.js
                publicPath: __dirname + '/out',//添加靜態(tài)資源, 否則會(huì)出現(xiàn)路徑錯(cuò)誤
                path : __dirname + '/out'
            },
            module : {
                rules: [
                    {test: /.js$/, use: ['babel-loader']},
                    {test: /.css$/, use: ['style-loader', 'css-loader']},/*解析css, 并把css添加到html的style標(biāo)簽里*/
                    //{test: /.css$/, use: ExtractTextPlugin.extract({fallback: 'style-loader',use: 'css-loader'})},/*解析css, 并把css變成文件通過link標(biāo)簽引入*/
                    {test: /.(jpg|png|gif|svg)$/, use: ['url-loader?limit=8192&name=./[name].[ext]']},/*解析圖片*/
                    {test: /.less$/, use: ['style-loader', 'css-loader', 'less-loader']}/*解析less, 把less解析成瀏覽器可以識(shí)別的css語(yǔ)言*/
                ]
            },
    }


webpack插件使用

首先我們由于要使用webpack插件, 因此我們要重新下載一下webpack包, 將目錄定位到當(dāng)前項(xiàng)目目錄, 輸入npm install webpack
之后我們修改webpack.config.js, 將下面代碼放到配置文件開頭. 這樣就可以使用插件了

var webpack = require('webpack');

將插件信息寫到配置文件里

var webpack = require('webpack');
var uglifyPlugin = new webpack.optimize.UglifyJsPlugin({minimize: true});//代碼壓縮

var CommonsChunkPlugin = new webpack.optimize.CommonsChunkPlugin('common');//把公共模塊提取出來(lái), 并取名為'common'(名字自起), webpack之后再out文件夾下生成common.js, 測(cè)試時(shí)記得引入提取出來(lái)的公共模塊js文件

var ExtractTextPlugin = require("extract-text-webpack-plugin");//將css獨(dú)立引入變成link標(biāo)簽形式, 使用該插件需要獨(dú)立下載'npm install extract-text-webpack-plugin --save-dev', 同時(shí)下面的rules也必須更改

var providePlugin = new webpack.ProvidePlugin({$: 'jquery', jQuery: 'jquery', 'window.jQuery': 'jquery'});//引入jquery



module.exports = {
    entry : {index: './src/js/entry.js', index2: './src/js/entry2.js'},
    output : {
        filename : '[name].js',
        publicPath: __dirname + '/out',
        path : __dirname + '/out'
    },
    module : {
        rules: [
            {test: /.js$/, use: ['babel-loader']},
            //{test: /.css$/, use: ['style-loader', 'css-loader']},
            {test: /.css$/, use: ExtractTextPlugin.extract({fallback: 'style-loader',use: 'css-loader'})},
            {test: /.(jpg|png|gif|svg)$/, use: ['url-loader?limit=8192&name=./[name].[ext]']},
            {test: /.less$/, use: ['style-loader', 'css-loader', 'less-loader']}
        ]
    },
    plugins: [uglifyPlugin, CommonsChunkPlugin, new ExtractTextPlugin('[name].css'),providePlugin]//插件集合
}


webpack服務(wù)器

首先先定位目錄輸入命令 npm install webpack-dev-server -g, 修改webpack.config.js文件

publicPath: 'http://localhost:8080/out',

html文件所引用的目錄也要更改:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>text</title>
     <link rel="stylesheet" href="http://localhost:8080/out/index.css">
</head>
<body>
    <a href="http://localhost:8080/index2.html">11</a>
    <div class="demo1"></div>
    <div class="demo2"></div>
    <script src="http://localhost:8080/out/common.js"></script>
    <script src="http://localhost:8080/out/index.js"></script>
</body>
</html>

webpack-dev-server一下看看效果

小工具: webpace-dev-server --devtool eval-source-map --progess --colors打包時(shí)輸入這一行可以直接找到文件如果出錯(cuò)時(shí)的位置

小知識(shí)點(diǎn): 上面這一句話如果覺得太長(zhǎng)可以將

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "xuan": "webpack-dev-server --devtool eval-source-map --progress --colors"
  },

這一段代碼放到項(xiàng)目目錄下的package.json里, 這樣調(diào)試時(shí)如果輸入npm run xuan就等于輸入那一長(zhǎng)串代碼

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容