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
    ]
  • 相关阅读:
    文字上下滚动效果
    导航点击变化
    腾讯新闻导航栏
    Docker 数据卷和DockerFile
    Docker 容器
    Docker 镜像
    Docker的初始和架构
    面向对象的设计模式与原则
    安装CentOS 7MInimal版本
    ASP.NET WebApi 启动默认的HelpPage文档注释
  • 原文地址:https://www.cnblogs.com/gssl/p/5984716.html
Copyright © 2011-2022 走看看