webpack-demo

Git Repo
webpack-API

Concepts 概念

At its core, webpack is a static module bundler for modern JavaScript applications. When webpack processes your application, it recursively builds a dependency graph that includes every module your application needs, then packages all of those modules into one or more bundles.

在其核心，webpack是現(xiàn)代JavaScript應(yīng)用程序的靜態(tài)模塊bundler。當webpack處理您的應(yīng)用程序時，它會遞歸地構(gòu)建一個依賴圖，其中包括應(yīng)用程序所需的每個模塊，然后將所有這些模塊打包成一個或多個包。

Core Concepts

• entry
• output
• Loaders
• Plugins

demo1 webpack初識

context

上下文環(huán)境 比如你在上課、你當前所在的教室就是上下文環(huán)境

entry 入口

定義入口的js文件目錄

output 輸出

module.exports ={
    //上下文環(huán)境
    context:__dirname+'/src',
    //入口   當前目錄/src/app.js
    entry:{
        app:'./app.js'
    },
    // 輸出位置   當前目錄/dist/app.bundle.js
    output:{
        path:__dirname+'/dist',
        filename:'[name].bundle.js'
    }
}

demo2 多個js引入

這個是按順序的打包js

module.exports = {
    context:__dirname+'/src',
    entry:{
        //按順序依次打包到當前目錄/dist/app.bundle.js
        app:['./aa.js','./bb.js']
    }
    ,
    output:{
        path:__dirname+'/dist',
        filename:'[name].bundle.js'
    }
}

demo3 多個輸出

多個輸出的文件名為其對應(yīng)的 key值

module.exports = {
    context:__dirname+'/src',
    entry:{
        //多個輸出  生成
        // 當前目錄/dist/app.bundle.js
        // 當前目錄/dist/bb.bundle.js
        app:'./aa.js',
        aa:'./bb.js'
    }
    ,
    output:{
        path:__dirname+'/dist',
        filename:'[name].bundle.js'
    }
}

demo4提取公共js

const webpack = require('webpack');
module.exports = {
    context: __dirname + '/src',
    entry: {
        app: './app.js',
        a: './a.js',
        b: './b.js'
    },
    output: {
        path: __dirname + '/dist',
        filename: '[name].bundle.js'
    },
    //提取公共部分   這里要安裝插件才可以
    plugins: [
        new webpack.optimize.CommonsChunkPlugin({
            name: "commons",
            filename: "commons.js",
            minChunks: 2, 
            //有任意模塊加載了兩次或更多
            //這里minChunks:2就是設(shè)置超過2次以上使用
        }),
    ],
}

demo5 熱更新

const webpack = require('webpack');
module.exports = {
        context: __dirname + '/src',
        entry: {
            app: './app.js'
        },
        output: {
            path: __dirname + '/dist/assets/',
            filename: '[name].bundle.js',
            publicPath: '/assets'
        },
        devServer: {
            contentBase: __dirname + '/src',
            hot: true,
            inline: true,
            open: true
        },
        plugins: [
            //實現(xiàn)熱更新   要全局安裝//webpack-dev-server  運行 cnpm install //webpack-dev-server -g
            new webpack.HotModuleReplacementPlugin()
        ]
    }
    //index.html 里面 script的src為: /assets/app.bundle.js
    //index.html需要放到 src目錄下
    //script 標簽中的 /assets 對應(yīng)的是 output.publicPath 的值
    //需要在本地安裝 webpack webpack-dev-server

demo6 es6轉(zhuǎn)換 和加載css樣式

先運行這個安裝必要的幾個模塊

cnpm i babel-loader babel-core babel-preset-es2015 style-loader@0.16.1 css-loader@0.28.0 --save-dev

注意千萬別按默認下載 css-loader style-loader版本太高可能不生效

建議安裝我這里的版本,還有順序問題一定是style-loader 然后再css-loader
,還要額外注意 webpack2不支持簡寫['style','css']的形式

還有會如果把babel寫在這里的配置方法會提示一個警告信息提示

DeprecationWarning: loaderUtils.parseQuery() received a non-string value which can be problematic, see https://github.com/webpack/loader-utils/issues/56 parseQuery() will be replaced with getOptions() in the next major version of loader-utils.

rules: [{
            test: /\.js$/,
            use: [{
                loader: 'babel-loader',
                options: {
                    presets: ['es2015']
                }
            }]
        }]

解決方案是當前目錄新建一個 .babelrc文件 內(nèi)容如下

{
    "presets": ["es2015"]
}

最終配置如下：

module.exports = {
    context: __dirname + '/src',
    entry: {
        app: './app.js'
    },
    output: {
        filename: '[name].bundle.js',
        path: __dirname + '/dist'
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                use: [{
                    loader: 'babel-loader'
                }]
            }
            ,
            {
                test: /\.css$/,
                //注意默認下載的style-loader css-loader不要太高
                // "css-loader": "^0.28.0",   0.28.7
                // "style-loader": "^0.16.1"  0.19.0版本太高可能會不加載css
                use: [
                    {
                    loader: 'style-loader'
                    },
                    {
                    loader: 'css-loader'
                    }
                ]
            }
         ]
    }
};