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
    ]
  • 相关阅读:
    工作流 —— AWS
    ant design —— form 生成 嵌套json数据
    react 获取子组件的 state (转发)
    React 调用子组件的函数(函数)
    react js 组件传参(转发)
    链接脚本文件(.ld .lds)详解
    gcc ------ -ffunction-sections -fdata-sections -gc-sections 参数详解
    GNU ARM 汇编伪指令
    STM32 CM3/CM4 ------ startup.s 文件分析 ------ GCC RT-Thread Studio 版本
    __attribute__之section详解 ------ 把函数指定到具体某个section 之 RT-thread 实例详解
  • 原文地址:https://www.cnblogs.com/gssl/p/5984716.html
Copyright © 2011-2022 走看看