Webpack 入門教程

時間 2019-11-17

標籤 webpack 入門教程简体版

原文原文鏈接

什麼是 Webpack？javascript

　　Webpack是近期最火的一款模塊加載器兼打包工具，它能把各類資源，例如JS（含JSX）、Coffee、樣式（含Less

/Sass）、圖片等都做爲模塊來使用和處理。

Webpack的優勢

　　一、支持CommonJS和AMD模塊。
　　二、支持不少模塊加載器的調用，可使模塊加載器靈活定製，好比babel-loader加載器，該加載器能使咱們使用ES6的語法來編寫代碼。
　　三、能夠經過配置打包成多個文件，有效的利用瀏覽器的緩存功能提高性能。
　　四、開發便捷，它能有Grunt或Gulp全部基本功能。使用模塊加載器，能夠支持Sass、Less等處理器進行打包且支持靜態資源樣式及圖片進行打包。
　　五、內置有Source Map，即便打包在一塊兒依舊方便調試。css

入門教程：html

入門Webpack，看這篇就夠了：http://blog.csdn.net/kun5706947/article/details/52596766前端

30分鐘手把手教你學webpack實戰：http://www.cnblogs.com/tugenhua0707/p/4793265.htmljava

Webpack 2 入門教程：https://gold.xitu.io/entry/583ffd1e61ff4b006b84daeb/?utm_medium=hao.caibaojian.com&utm_source=hao.caibaojian.comnode

Webpack 2 打包實戰：https://github.com/fenivana/webpack-in-actionjquery

Webpack的安裝與配置webpack

　　1、安裝git

　　咱們常規直接使用npm的形式來安裝：es6

$ npm install webpack -g  # 全局安裝

　　固然若是常規項目仍是把依賴寫入package.json包去更人性化：

$ npm init # 會自動生成一個package.json文件 $ npm install webpack --save-dev  # 將webpack增長到package.json文件中

　　若是想要安裝開發工具插件:

$ npm install webpack-dev-server --save-dev # 自動刷新 $ npm install style-loader css-loader --save-dev  # 編譯樣式的插件

　　2、配置

　　每一個項目下都必須配置有一個webpack.config.js ，它的做用如同常規的gulpfile.js/Gruntfile.js，就是一個配置項，告訴webpack它須要作什麼。下面是一個例子：

var path = require("path");
var glob = require('glob');
var webpack = require('webpack');
var autoprefixer = require('autoprefixer');//添加瀏覽器供應商前綴
var HtmlWebpackPlugin = require('html-webpack-plugin'); //html模板生成器
var ExtractTextPlugin = require('extract-text-webpack-plugin'); //將你的行內樣式提取到單獨的css文件裏
var CleanPlugin = require('clean-webpack-plugin'); //文件夾清除工具
var CopyWebpackPlugin = require('copy-webpack-plugin'); //文件拷貝

module.exports = {
    // devtool: 'eval-source-map', //配置生成Source Maps，利於排錯和定位
    //插件項
    plugins: [
        //全局配置加載,使用ProvidePlugin加載使用頻率高的模塊
        new webpack.ProvidePlugin({
            $ : "jquery",
            jQuery : "jquery",
            "window.jQuery" : "jquery"
        }),
        // new CleanPlugin(['dist']),//清空dist文件夾
        //提公用js到common.js文件中
        new webpack.optimize.CommonsChunkPlugin({
            name: 'vendors', //將公共模塊提取，生成名爲'vendors'的chunk
            chunks: ['index','list','about'], //提取哪些模塊共有的部分
            minChunks: 3 //提取至少3個模塊共有的部分
        }), 
        //HtmlWebpackPlugin，模板生成相關的配置，每一個對於一個頁面的配置，有幾個寫幾個
        new HtmlWebpackPlugin({ //根據模板插入css/js等生成最終HTML
            title: 'index', //用來生成頁面的 title 元素
            // favicon: './src/img/favicon.ico', //favicon路徑，經過webpack引入同時能夠生成hash值
            filename: './view/index.html', //生成的html存放路徑，相對於path
            template: './src/view/index.html', //html模板路徑
            inject: 'body', //js插入的位置，true/'head'/'body'/false
            hash: true, //爲靜態資源生成hash值
            chunks: ['vendors', 'index'],//須要引入的chunk，不配置就會引入全部頁面的資源
            minify: { //壓縮HTML文件    
                removeComments: true, //移除HTML中的註釋
                collapseWhitespace: false //刪除空白符與換行符
            }
        }),
        new HtmlWebpackPlugin({ //根據模板插入css/js等生成最終HTML
            title: 'list', //用來生成頁面的 title 元素
            // favicon: './src/img/favicon.ico', //favicon路徑，經過webpack引入同時能夠生成hash值
            filename: './view/list.html', //生成的html存放路徑，相對於path
            template: './src/view/list.html', //html模板路徑
            inject: true, //js插入的位置，true/'head'/'body'/false
            hash: true, //爲靜態資源生成hash值
            chunks: ['vendors', 'list'],//須要引入的chunk，不配置就會引入全部頁面的資源
            minify: { //壓縮HTML文件    
                removeComments: true, //移除HTML中的註釋
                collapseWhitespace: false //刪除空白符與換行符
            }
        }),
        new ExtractTextPlugin('css/[name].css'), //單獨使用link標籤加載css並設置路徑，相對於output配置中的publickPath
        //壓縮js代碼
        new webpack.optimize.UglifyJsPlugin({    
            compress: {
                warnings: false
            },
            except: ['$super', '$', 'exports', 'require'] //排除關鍵字
        }),
        //拷貝圖片
        // new CopyWebpackPlugin([
        //     {from: './src/images', to: './images'}
        // ]),
        //啓用熱模塊更換
        new webpack.HotModuleReplacementPlugin()
    ],
    //使用webpack-dev-server，提升開發效率
    devServer: {
        contentBase: './',
        host: 'localhost',
        port: 9090, //默認8080
        inline: true, //能夠監控js變化
        hot: true, //熱啓動
    },
    //頁面入口文件配置,有幾個寫幾個
    entry: {
        index: './src/js/page/index.js',
        list: './src/js/page/list.js'
    },
    //入口文件輸出配置
    output: {
        path: path.join(__dirname, 'dist'), ////輸出目錄的配置，模板、樣式、腳本、圖片等資源的路徑配置都相對於它(__dirname指根目錄)
        filename: 'js/[name].[hash:6].js', //每一個頁面對應的主js的生成配置
        publicPath: '/dist/', //模板、樣式、腳本、圖片等資源對應的server上的路徑
        chunkFilename: "js/[id].chunk.js" //chunk生成的配置
    },
    module: {
        //加載器配置,"-loader"實際上是能夠省略不寫的,多個loader之間用"!"鏈接起來，根據從右到左的順序依次調用加載器，前一個的輸出是後一個的輸入
        loaders: [
            {
                //.css文件使用style-loader、css-loader和postcss-loader來處理
                test: /\.css$/, 
                loader: ExtractTextPlugin.extract("style-loader", "css-loader!postcss-loader")
            },
            {
                //.less文件使用css-loader、less-loader和postcss-loader來編譯處理
                test: /\.less$/, 
                loader: ExtractTextPlugin.extract("css!less!postcss")
            },
            {
                //.js文件使用json-loader來處理
                test: /\.json$/, 
                loader: 'json'
            },
            {
                //HTML加載器,主要是加載模板使用的
                test: /\.html$/, 
                loader: "html?attrs=img:src img:data-src" 
            },
            {
                //文件加載器，處理文件靜態資源
                test: /\.(woff|woff2|ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                loader: 'file-loader?name=./fonts/[name].[ext]'
            },
            {
                //.js文件使用babel-loader來編譯處理,將es6轉es5,排除node_modules目錄下的文件, npm安裝的包不須要編譯
                test: /\.js$/, 
                loader: 'jsx!babel?presets[]=es2015', 
                exclude: /node_modules/
            }, 
            {
                //圖片文件使用url-loader來處理,小於8kb的直接轉爲base64
                test: /\.(png|jpg|gif)$/, 
                loader: 'url-loader?limit=8192&name=images/[hash:8].[name].[ext]'
            }
        ]
    },
    postcss: function(){
        return [autoprefixer] //調用autoprefixer插件添加供應商前綴
    },
    //其它解決方案配置
    resolve: {
        //查找module的話從這裏開始查找
        // root: [], //絕對路徑
        //自動擴展文件後綴名，意味着咱們require模塊或import的時候能夠省略不寫後綴名
        extensions: ['', '.css', '.js', '.json', '.less']
        //模塊別名定義，方便後續直接引用別名，無須多寫長長的地址
        // alias: {
        //     a: './src/js/page/bind.js', //後續直接 require('a') 便可
        //     greet: './src/js/page/greeter.js'
        // }
    }
};

開發頁面

index.js 內容以下：

//引入css
require('../../css/lib/normalize'); 
require('../../css/page/main'); 
require('../../css/page/myapp');

var greet = require('../../js/page/greeter.js');

let loader = require('../../js/page/bind.js');
console.log(loader);
document.getElementById('wrapper').appendChild(greet());
document.getElementById('container').innerText = 'APP';

//彈出提示框
$("#btn").on("click", function(){
    //webpack經過require.ensure來判斷是否對資源進行按需加載
    require.ensure(["../../js/components/dialog"], function (require){
        var dialogModule = require('../../js/components/dialog');

        dialogModule();
    }); 
});

index.html 內容以下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>index</title>
</head>
<body>
    <div id="wrapper">
        <div class="container" id="container"></div>
    </div>
    <button id="btn" type="button">提示框</button>
</body>
</html>

list.js 內容以下：

//引入css
require('../../css/lib/normalize'); 
require('../../css/page/main'); 

var slider = require('../../js/components/slider');
let loader = require('../../js/page/bind.js');
console.log(loader);

document.getElementById('container').innerText = 'APP';

//輪播圖
slider();

list.html 內容以下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>list</title>
</head>
<body>
    <div id="wrapper">
        <div class="container" id="container"></div>
    </div>
    <button id="btn" type="button">提示框</button>
    <br>

    <!--輪播區域-->
    <div id="bannerArea" class="banner">
        <div class="banner__img">
            <a href="javascript:"><img src="../images/1.jpg" width="100%" height="532" alt=""></a>
            <a href="javascript:"><img src="../images/2.jpg" width="100%" height="532" alt=""></a>
            <a href="javascript:"><img src="../images/3.jpg" width="100%" height="532" alt=""></a>
        </div>
        <ul class="banner__nav" id="bannerNav">
            <li class="selected">1</li>
            <li>2</li>
            <li>3</li>
        </ul>
    </div>
</body>
</html>

爲了方便，咱們一般將運行命令寫在package.json中

"scripts": {
    "dev": "webpack-dev-server --progress --colors --hot --inline", //開發模式
    "build": "webpack -p" // 編譯打包
 }

運行webpack

$ npm run build

經過webpack-dev-server實現自動刷新頁面

$ npm run dev

只須要瀏覽器打開http://localhost:9090/dist/view/index.html便可看到效果，修改js、css代碼保存後，頁面自動刷新。

webpack經常使用命令：

$ webpack --config webpack.min.js   //另外一份配置文件

$ webpack --display-error-details   //顯示異常信息

$ webpack -w   //提供watch方法，實時進行打包更新
 
$ webpack -p    //對打包後的文件進行壓縮
 
$ webpack -d    //提供SourceMaps，方便調試，告知哪些模塊被最終打包到哪裏了

webpack --colors   //輸出結果帶彩色，好比：會用紅色顯示耗時較長的步驟

webpack --profile   //輸出性能數據，能夠看到每一步的耗時

webpack --display-modules   //默認狀況下 node_modules 下的模塊會被隱藏，加上這個參數能夠顯示這些被隱藏的模塊