zoukankan      html  css  js  c++  java
  • webpack

    1. CommonsChunkPlugin

    // CommonsChunkPlugin通过这个插件加载的文件为公共文件, 可以被浏览器缓存, 需要手动在html上加载, 而且是先加载
    var commonsPlugin = new webpack.optimize.CommonsChunkPlugin({
            name: "common",
            filename: "js/common" + (isHash ? ".[hash]" : "") + ".js"
    });
    ...
    plugins: [
        new webpack.optimize.CommonsChunkPlugin('common.js'),
        commonsPlugin
    ]

    2. html-webpack-plugin (三方)

    // 打包html页面
    var HtmlWebpackPlugin = require('html-webpack-plugin');
    var rootJsHtml = "<script>...</script>" plugins: [
      new HtmlWebpackPlugin({
      filename: 'index.html',
      template: './common_modules/common/html/checkBrowser.html',
      rootJs: rootJsHtml,
      inject: false
      })
    ]

    -----checkBrowser.html页面
    页面里面可以加入这么一句, 可以把rootJSHtml的内容写入页面里面去~~ 真心强大~
    <%= htmlWebpackPlugin.options.rootJs %>

    3. transfer-webpack-plugin (三方)

    // 把指定文件夹下的文件复制到指定的目录
    var TransferWebpackPlugin = require('transfer-webpack-plugin');
    plugins: [

      new TransferWebpackPlugin([
        {from:
    './common_modules/images', to: 'img'},
        {from:
    './common_modules/download', to: 'download'},
        {from:
    './common_modules/html', to: 'html'},
        {from:
    './common_modules/mslot', to: 'mslot'},     {from: './desktop/src/lib/sewise', to: 'sewise'},     {from: './common_modules/json', to: 'json'}   ])
    ]

    4. DefinePlugin

    // definePlugin 接收字符串插入到代码当中, 所以你需要的话可以写上 JS 的字符串
    var GLOBALS = {
            'process.env.NODE_ENV': DEBUG ? '"development"' : '"production"',
            '__DEBUG__': DEBUG,
            '__DEBUGDATA__': false,                         //是否使用json数据
            '__CRYPTODATA__': true,                         //是否需要加密传输及接收
            '__ASE_KEY__': '"OPyZ03AgyxoJT1xM"',            //加密key
            '__PACKAGE_TIME__': '"' + strPkDt + '"'         //打包时间
    };
    ... plugins:[
    new webpack.DefinePlugin(GLOBALS)]

    5. extract-text-webpack-plugin (三方)

    // 可以打包css, 貌似还能解释sass(未试验)
     var ExtractTextPlugin = require("extract-text-webpack-plugin");
    var extractCSS = new ExtractTextPlugin('css/css.' + (isHash ? '[hash]' : '[id]') + '.[name].css');
    ...
    module: {
        loaders: [
            test: /.scss$/,
            loader: extractCSS.extract(['css', 'sass'])
        ]
    }
    ...
    plugins:[
        extractCSS
    ]
  • 相关阅读:
    HTML5中的Range对象的研究
    浅谈移动端开发页面
    你所不了解的javascript操作DOM的细节知识点(一)
    理解Javascript的动态语言特性
    webview与JS的交互
    javascript客户端检测技术
    逐渐深入地理解Ajax
    html5获取地理位置信息API
    Javascript中的Form表单知识点总结
    go语言基础之不同目录
  • 原文地址:https://www.cnblogs.com/gssl/p/5984716.html
Copyright © 2011-2022 走看看