webpack(exclude存疑)

参考资料

webpack漫谈
webpack专栏

js早期引入模块的方式

script标签
Require.js
Common.js

启动服务器(by 朴灵)

npm install anywhere -g

anywhere

模块

模块由两部分组成：模块名与模块文件
模块可以来自node_modules目录，也可以来自任何文件(包括自定义)
module: 定义模块的处理方式
resolve.alias 定义模块的别名

webpack

webpack不会做代码分析
webpack.config.js文件依赖于node.js环境
webpack负责对模块进行编译。这个所谓的编译过程实质上是webpack识别模块名，依据映射关系找到相应文件，放入某个特殊区域的过程。
entry: 定义整个编译过程的起点
entry中只能require(),不能import .. from xx;因为webpack不会做代码分析，只会识别模块名。(信鸽不需要也不会查看信件，它的职责只是送信)
output: 定义整个编译过程的终点

about require

从node_modules中引入模块

entry.js

const React = require('react');

webpack.config.js

module.exports = {
...
  module: {
    loaders:[
      {
        test: /\.js[x]?$/,
        exclude: /node_modules/,
        loader: 'babel-loader?presets[]=es2015&presets[]=react',
      },
    ]
  }
};

按照约定查询逻辑:node_modules/react/package.json===>
发现package.json.main=react.js==>
在./lib目录下发现react.js，它就是最终被webpack放入bundile.js的文件

其它文件中引入模块

entry.js

require('./writrByme.css');

webpack.config.js

module.exports = {
...
  module: {
    loaders:[
      { test: /\.css$/, loader: 'style-loader!css-loader' },
    ]
  }
};

直接在当前目录下找到writrByme.css，放入bundle.js

一个完整的webpack.config.js剖析

var webpack = require("webpack");
var DefinePlugin = require('webpack/lib/DefinePlugin');
//导出对象 
module.exports =  { 
        //webpack的编译入口
        context:process.cwd(),//===>webpack编译的上下文
        //process.cwd()是node.js的启动目录
        watch: true, //===>改动文件后动态编译
        entry: './index.js',//===>以context为参照，生成绝对路径；webpack会以entry指定文件为导入文件，用于导入各种资源文件


        devtool: 'source-map',//===>开发者工具(资源映射表)，在调试时Chrome将显示编译前的文件(更易读)
        output: {
            path: path.resolve(process.cwd(),'dist/'),
            filename: '[name].js'
        },

        //个性化配置;alias即type of(起别名)；
        resolve: {
            alias:{ jquery: process.cwd()+'/src/lib/jquery.js', }
            //===>形成jquery模块的映射机制(模块名与模块文件所在路径)
        },

        //插件
        plugins: [
            new webpack.ProvidePlugin({
                $: 'jquery',
                _: 'underscore',
                React: 'react'
            }),
            new DefinePlugin({
              'process.env': {
                'NODE_ENV': JSON.stringify('development')
              }
            })
        ],

        module: {
            //加载方式
            loaders: [{
                //如果模块为js文件
                test: /\.js[x]?$/, //===> 正则表达式
                exclude: /node_modules/, //===> node_modules目录下的文件除外
                loader: 'babel-loader' /* string(es6)<-->string(es7)*/                                             
            },  {
                //如果模块为less文件
                test: /\.less$/,
                loaders:['style-loader', 'css-loader','less-loader']//等价于loader:"less!css!style"
                //loaders的元素执行顺序是从右往左
            }, {
                //如果模块为图片文件
                test: /\.(png|jpg|gif|woff|woff2|ttf|eot|svg|swf)$/,
                loader: "file-loader?name=[name]_[sha512:hash:base64:7].[ext]"
            }, {
                //如果模块为html文件
                test: /\.html/,
                loader: "html-loader?" + JSON.stringify({minimize: false })
            } ]
        }
    };

plugins

plugins在不同阶段有不同行为

代码压缩混淆(jquery.js==>jquery.min.js)

 new uglifyJsPlugin({
      compress: {
        warnings: false
      }
    })