webpack基础应用

    ... ...
    <link rel="stylesheet" href="/stylesheets/bootstrap.min.css" type="text/css" />
    <link rel="stylesheet" href="/stylesheets/bookmark.css" type="text/css" />
    <link rel="stylesheet" href="/stylesheets/mricode.pagination.css" type="text/css" />
    <link rel="stylesheet" href="/stylesheets/animate.css" type="text/css" />

    <script src="javascripts/jquery-2.1.4.min.js"></script>
    <script src="javascripts/mricode.pagination.js"></script>
    <script src="javascripts/bootstrap.min.js"></script>
    <script src="javascripts/main.js"></script>
    <script src="javascripts/wow.min.js"></script>
    ... ...

一个简单的web应用所用到的资源

简单的css
几张图片
简单的一些js文件

后来。。。

各种前端模块儿的引用
为了让页面更炫酷功能更亲民，引入的第三方js插件(jQuery)
为了让写代码更方便，强调组件化，使用的一系列框架(react,redux... ...)

“臃肿”

随之而来的前端工具

包管理：bower，npm
构建工具：gulp，grunt
打包工具: browserify, webpack
编译：babel

。。。。。。

webpack

一个新兴的模块打包工具

准备工作

npm install webpack -g  #安装

安装：

命令行常用参数：

--colors  #让webpack的输出结果带彩色
--display-modules  #显示隐藏的目录
--profile  #能看到每一步的耗时
-w  #监听状态

npm install webpack-dev-server -g  #全局安装一个webpack开发工具

http://127.0.0.1:8080/

开发：

var config = {
  entry: {
    "deadline": './source/scripts/deadline.js',
    "vendors": ['jquery', 'bootstrap.css', 'font-awesome', 'bootstrap.js']
  },
  output: {
    path: __dirname + '/public/assets/',
    filename: '[chunkhash:8].[name].js',
    chunkFilename: '[name].[chunkhash:8].js'
  },
  module: {
    loaders: [
      {
        test: path.join(node_modules, 'jquery/dist/jquery.min.js'),
        loader: 'expose?jQuery'
      },
      {
        test: /\.js?$/,
        exclude: /(node_modules|bower_components)/,
        loader: 'babel',
        query: {
          presets: ['react', 'es2015']
        }
      },
      {
        test: /\.css$/,
        loader: ExtractTextPlugin.extract('style-loader', 'css-loader')
      }
    ]
  }
};

webpack.config.js

entry/output:

当入口为单个字符串时，会解析路径并进行打包

当为数组的时候也就是多个文件的时候，会将数组中的单个文件都打包到一个文件中

如果为对象的话会根据key打包生成多个文件

module.exports = {
  entry: './main.js',
  output: {
    filename: 'bundle.js'
  }
};

//为字符串

module.exports = {
  entry: ['./main1.js','./main2.js']
  output: {
    filename: 'bundle.js'
  }
};

//为数组

module.exports = {
  entry: {
    bundle1: './main1.js',
    bundle2: ['./main2.js', './main3.js']
  },
  output: {
    filename: '[name].js',
    path: __dirname + '/built'
  }
};

//为对象

module/loader：

test：用正则来匹配文件后缀
exclude/include:用来避开或包含某些目录
query：作为附带条件，可以用？的方式作为参数跟在loader字符串之后
loader：后跟加载器模块儿，起着对入口文件转译编译的作用

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

      



      {
        test: /\.less$/,
        loader: ExtractTextPlugin.extract("style-loader", "css-loader!less-loader")
      },
      {
        test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        loader: "url-loader?limit=10000&minetype=application/font-woff"
      },
      {
        test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        loader: "file-loader"
      },
      {
        test: /\.(png|jpg|gif)$/,
        loader: 'url-loader?limit=10000&name=build/[name].[ext]'
      }

plugins:

webpack中提供了大量的插件来实现各种功能，例如代码的压缩，自动打开浏览器窗口，自动生成html页面，打包公共的代码等等

plugins: [
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery",
      "window.jQuery": "jquery",
      React: 'react',
      ReactDom: 'react-dom',
      ReactDOM: 'react-dom'
    }),
    new ExtractTextPlugin("[chunkhash:8].[name].css"),
    new webpack.optimize.CommonsChunkPlugin('vendors', 'vendors.js'),
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false
      }
    })
  ],

devtool:

webpack-dev-server
webpack-dev-middleware
source-map（7种）

var Middleware = require("webpack-dev-middleware");
var webpack = require("webpack");

var compiler = webpack({
    // configuration
    output: { path: '/' }
});

app.use(Middleware(compiler, {
    // options
}));

// webpack dev middleware
//---------------------------


devtool: '#inline-source-map'

//定义是否有source-map和source-map的类型

webpack的优化

使用别名

resolve: {
    alias: {
      'jquery': 'jquery/dist/jquery.min.js',
      'bootstrap.css': 'bootstrap/dist/css/bootstrap.min.css',
      'font-awesome': 'font-awesome/css/font-awesome.min.css',
      'bootstrap.js': 'bootstrap/dist/js/bootstrap.min.js'
    }
  }

忽略对已知文件的解析

module: {
    noParse: [/moment-with-locales/]
  }

查看webpack的打包输出（http://webpack.github.io/analyse/）

webpack --colors --profile --display-modules

//在命令行查看整个打包过程的详细信息

webpack --profile --json > stats.json

//将webpack的打包信息生成json文件，可以配合网站进行解析

线上部署：

线上部署的要求页面所需加载的文件尽可能小，尽可能少

plugins: [  new webpack.optimize.UglifyJsPlugin({compress: {warnings: false}})]

//使用插件UglifyJsPlugin

webpack --optimize-minimize 

//命令行带参的方式

压缩：

打包合并：

var config = {
    entry: {
    "register": "./source/scripts/register.js",
    "vendors": ['jquery', 'bootstrap.css', 'react', 'react-dom', 'bootstrap.js']
    },
    ... ...
    plugins: [
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery",
      "window.jQuery": "jquery",
      React: 'react',
      ReactDom: 'react-dom',
      ReactDOM: 'react-dom'
    }),
    new webpack.optimize.CommonsChunkPlugin('vendors', 'vendors.js')
  ],

}

使用浏览器缓存

... ...
output: {
    path: __dirname + '/public/assets/',
    filename: '[chunkhash:8].[name].js',
  },
... ...
plugins: [
    new ExtractTextPlugin("[chunkhash:8].[name].css"),
    new webpack.optimize.CommonsChunkPlugin('vendors', 'vendors.js'),
    })
    
    new HtmlwebpackPlugin({
        filename: 'register.html',
        minify: {collapseWhitespace: true},
        template: __dirname + '/source/' + 'register.html',
        inject: true,
        chunks: ['register.css', 'vendors', 'register']
    })
]

webpack基础应用

后来。。。

随之而来的前端工具

webpack

一个新兴的模块打包工具

准备工作

entry/output:

module/loader：

plugins:

devtool:

webpack的优化

线上部署：

deck

deck

YU LI