Webpack3.x入门篇——webpack.config配置

Webpack简介

webpack 是一个现代 JavaScript 应用程序的模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成少量的 bundle - 通常只有一个，由浏览器加载。
它是高度可配置的，但是，在开始前你需要先理解四个核心概念：入口(entry)、输出(output)、loader、插件(plugins)。 —— [ webpack中文官网 ]

Webpack环境配置

nodeJs环境安装

1、安装node.js，请至nodejs.cn下载最新nodejs版本—— [nodeJS官网链接]

2、nodejs安装教程网上有很多，这里就不赘述了，推荐查看—— [Node.js 安装配置]

Webpack环境安装

1、这里我们使用npm包进行webpack安装环境配置

npm install -g–save webpack //全局安装webpack

2、webpack插件安装

• html-webpack-plugin

  npm install -g–save html-webpack-plugin //安装html-webpack-plugin用于压缩HTML代码

• html-loader

  npm install -g–save html-loader//安装html-loader用于解析HTML代码

• glob

  npm install -g–save glob//用于对文件的路径进行处理

• 类似还有相关插件
  webpack-dev-server
  babel
  babel-core
  babel-loader
  babel-preset-es2015
  babel-runtime
  less-loader
  uglify-js
  url-loader
  css-loader
  less-loader
  sass-loader
  ….
  这里就不在赘述，依照上面逐个npm即可

Webpack实战Demo演示

常见项目路径

biz（源码文件夹）

index（html,less,js….）

login

…….

dist（用于存放压缩后文件）

css

font

image

js

……

src（资源文件路径）

font

framework

image

less

…….

webpack.config配置

代码块语法遵循标准的Commonjs规范的模块代码，例如：

//引入webpack模块
var webpack = require('webpack');   
//nodejs下处理路径的小工具                                       
var path = require('path'); 
//处理文件路径
var glob=require('glob');                                               
//html文件打包压缩，动态引用
const HtmlWebpackPlugin=require('html-webpack-plugin'); 
//html文件解析器                 
const htmlLoader=require("html-loader");                                    

//获取文件路径方法
var getEntry = function(){
    //用于返回给entry的对象
    var entry={};
    glob.sync('./biz/**/*.*').forEach(function(name){
        //例如./biz/index/js/index.js和./biz/login/login.js都会被找出来
        var filePath=name;
        //文件名，如index,login（省略后缀）
        var fileName=name.substring(name.lastIndexOf("\/")+1,name.lastIndexOf('.'));//
        //由于我们需要压缩多个同名文件，所以需要用数组来创建入口对象
        if(entry[fileName]==undefined){
            switch(fileName){
                case"index":case"login":
                    //需要进行的特殊处理
                    entry[fileName]=new Array();
                    entry[fileName].push(filePath);
                    entry[fileName].push('./src/js/xxx.js');
                break;
                default:
                    entry[fileName]=new Array();
                    entry[fileName].push(filePath);
                    break;
            }
        }else{
            entry[fileName].push(filePath);
        }
    })
    return entry
};

module.exports = {
    //等同于下面输入方法
    entry: getEntry(),
    /*
    entry:{
        'login':[
            './biz/login/controller/login.js',
            './biz/login/view/login.less',
            './src/framework/media.js'
        ],
    }
    */
    output: {
        path:  __dirname+'/dist/js/',
        filename: '[name].[chunkhash].js',
        publicPath:'/'
    },
    devServer: {
        inline: false,
        contentBase: "./dist",
    },
    module: {
        rules: [
            {
                text:/\.(less|css|sass)$/,
                use[
                    'style-loader','css-loader','less-loader'   ,'sass-loader'
                ]
            },{
                text:/\.(jpe?g|gif|ttf|woff|eot|svg|png|PNG)$/,
                loader:'url-loader?limit=10000000000&name=[path][name].[ext]'
            }
            { 
                test: /\.js$/,  
                //js文件解析时引用babel将源码转换为es5标准用于向下兼容浏览器
                use:{  
                    loader: 'babel-loader' ,
                    query: { presets: ['es2015']}
                }
            }
        ]
    },
    plugins: [
        //用于压缩js文件
        new webpack.optimize.UglifyJsPlugin({
            compress:{
                warnings:false,
                drop_console: true  //去除注释
            },
            mangle:false            //不开启代码混淆
            //except: ['$super', '$', 'exports', 'require','$scope','$rootScope']    //排除关键字
        }),
        //用于压缩HTML文件
        new HtmlWebpackPlugin({
            title:"this is the result",
            filename:'dist/htmlTemplate/index.html',
            template:'biz/index.html',
            inject:'body',
            favicon:'',
            minify:{
                caseSensitive:false,            //是否大小写敏感
                collapseBooleanAttributes:true, //是否省略布尔型数值写法
                collapseWhitespace:true,        //删除空白行和换行
                removeComments:false            //是否去除注释
            },
            hash:true,
            cache:true,
            chunks['index'],
        })
    ]
}

Webpack.config参数解释（专为太长不看星人准备）

1. entry：

   webpack入口接收一个对象，内部可以接收{key:value}，打包单个文件时value为字符串，value也可以接收一个数组，内部由多个文件路径构成，webpack会把这个数组里多个文件压到同名key对应文件下；

2. output:

   webpack出口，可以设置输出路径，及输出文件名等；

3. devServer:

   创建一个小型的node服务器，用于实时监测js文件变动时，实时同步刷新页面；(新手同学可忽略)

4. module:

   text字段是一个正则表达式用于匹配对应后缀名文件的解析方式,若有使用一些外部插件则使用use加载插件

5. plugins

   plugins用于初始化部分webpack引用插件，本例当中使用到了UglifyJs和HtmlWebpackPlugin

6. 更多webpack帮助可以参见—— [webpack官方帮助]

---

学无止境——我还在路上